Dynamic Article

Dynamic Article Component

Dynamic articles are a great way to share text and images that are hosted on your server or in your Umajin Cloud.

Using dynamic content allows you to feed fresh content such as products, campaigns, special store offers, opening hours etc without having to republish your Project.

Keep your Project up to the minute by publishing fresh articles that can be set up and also edited within the Umajin Cloud. 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 an Article thats size will be maintained across devices.

Data BindingSetting up links to Umajin Cloud data feeds.
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. They will have a name and a numerical ID.

AppearanceSets the look of the text displayed in the article.
HTML scaleAllows for the HTML content to be scaled up or down relative to the Project 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.

StylesheetUsed 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 ClickedAction occurs when the URL is clicked on.
On CompleteAction occurs when all resources have been collected or an error has been returned.