Use of resources in external object

Tips and tricks
1

Question: how to use a resource in my (often external) object

Problem:

  1. to use an image / font / etc in CSS / HTML, we need the URL of the file
  2. if we directly get the URL of a added as an object’s resource, we can see that it contains the object’s row_id /resource?code=TEST_IMG&type=IMG&object=ObjectExternal&objid=2012
  3. Knowing that row_id are not consistent from one instance to another, we cannot directly use this kind of URLs (obtained through click right on the resource > get image url)

General Solutions

  • calculating the URL on the external object’s javascript
  • calculating the URL server-side Java code and passing it to the external object’s script
  • using a disposition resource and directly use a /resource URL
  • passing the resource as a base64 String to the script / template (useful for HTML/PDF publications for example)
2

Script-side External Object’s Image URL resolving

Configuration is as follows:

- External object : DemoTestOe
  - Functions: set a read function to habilitate groups
  - Resources
    - HTML resource "HTML"
    - Javascript resource "SCRIPT"
    - Image resource "TEST_IMG

External object’s Java code

Reminder: ResponsiveExternalObject is a specialized external object type that basically builds a webpage base on the resources with codes HTML, CSS and SCRIPT and calls the SCRIPT’s render method

package com.simplicite.extobjects.Demo;
import com.simplicite.webapp.web.ResponsiveExternalObject;
public class DemoTestOe extends ResponsiveExternalObject {}

HTML code

<h1>External Object & Images</h1>
<img id="test-img-container" alt="Example image"/>

SCRIPT code

var DemoTestOe = (function() {
	
	var render = () => {
		getExternalObjectImageUrl('DemoTestOe','TEST_IMG',url=>$('#test-img-container').attr('src',url));
	};
	
	// callback-based tool to get the url for an external object's image resource
	var getExternalObjectImageUrl = (objectName,imageCode,callback)=>$ui.getAjax().getExternalObject(oe=>callback($ui.getAjax().getResourceURL(imageCode,'IMG','ObjectExternal',oe.id)),objectName);

    return { render: render };
})();
3

Using a disposition resource’s URL (font example)

The font must be added as a resource of the default disposition. (the disposition is in the System module, but the resource can be in your module)

Configuration

- Disposition: default
  - Resource:
    - type: Font
    - code: TEST_FONT
    - file: my_font.ttf
- External Object: DemoTestOe
  - Functions: set a read function to habilitate groups
  - Resources
    - HTML resource "HTML"
    - CSS resource "STYLES"

External object’s Java code

None needed, as by default the HTML and STYLES resources are served and we do not need to wait for any data.

HTML code

<h1>Example</h1>
<p class="customfont">Hello World</p>

STYLES code

@font-face {
	font-family: "MyFont";
	src: url(/resource?code=TEST_FONT&type=FONT) format("truetype");
}

.customfont {
	color: red;
	font-family: "MyFont", sans-serif;
	font-size: 3rem;
}