Dynamic Article

Dynamic articles are a great way to share text and images that are hosted on your server or in your Umajin Cloud/Dashboard. Using dynamic content allows you to feed fresh content such as products, campaigns, special store offers, opening hours etc without having to republish your app.

Keep your app up to the minute by publishing fresh articles that can be set up and also edited within the Umajin Cloud/Dashboard. The Article ID number and the name are called up to populate the feed from the Feed Picker.

Unsupported HTML

  • Relative URL <base>
  • <style>
  • <script>

CSS support

Not all CSS rules are supported.  For a list of supported rules see HTML – CSS selector and properties support.

Tutorials

  1. Tutorial on Dynamic Articles – Our basic instructions to get you started.
  2. Tutorial on Dynamic Articles: mapping styles and CSS – fast HTML styling.

Properties for Dynamic Article

Name When components are placed on a page they appear highlighted blue in the scene tree and can be renamed by double clicking in this panel and typing the new name. Components can also be set to be visible/invisible on the page, using the ‘eye’ icon on this panel.
Position and Size Sets position and size. As long as measurements are maintained as percentages it deals automatically with dynamic layout and resizing for different devices and orientations. You can use millimeters to control aspects of size like width or height in order to create a group that will be well positioned across devices.
Data Binding Setting up links to Dashboard data feed.
Article ID Click the folder icon to select the article you want from the Feed Picker. You will have already entered these articles into the Umajin Cloud/Dashboard. They will have a name and a numerical ID.
Appearance Sets the look of the text displayed in the article.
HTML scale Allows for the HTML content to be scaled up or down relative to the app page.
Resize type Options are Pixels, Scale with screen or Scale with point.
‘Millimeters’ is fixed size in pixels.
‘Scale with screen’ maintains scale relative to the app proportions.(Default)
‘Scale with point’ same as ‘Scale with screen’, but then scaled for correct point size.
Resize to Content Checkbox. When checked, the Dynamic Article container height will vary dependent on the HTML content it calls. This should be checked if the Dynamic Article is nested in a Scroll Panel Component.
Stylesheet Used for setting CSS rules applicable to this Dynamic Article only. NOTE: if the Style Mapper property has been used it will have written the separator”/*style map*/” and included its CSS. Everything after this point will be overwritten if style mapping is changed or an app style used (mapped) is changed. Keep your CSS above the separator.
Style Map Used to map global App Styles to some HTML tags in your Dynamic Article. It does this by writing CSS rules to the Stylesheet property.
Preset A Preset is a pre-determined set of properties and files for a component. This component does not have a default preset but you can create your own Preset by building your assets, putting them in your Image folder and then selecting them in the Properties panel. The ’SAVE’ button will enable you to name and save your preset under the Custom tab.
The ‘LOAD’ button  opens the Preset Selector, which has tabs for Predefined and Custom, so you can choose your custom preset to load for your Dynamic Article component.

 

Events that can Trigger an Action on the Dynamic Article Component

On URL Clicked Action occurs when the URL is clicked on.
On Complete Action occurs when all resources have been collected or an error has been returned.