You are here

Example 2: Dynamic image

Create another new item for the form stencil, for example, create a configurable image. Unlike the static image of the previous example, the user building the form will be able to select the image that will be displayed.

The Form runtime template needs to show the image that the form builder has selected. Assume that a property url is set (see later on). Note the use of ng-src (see AngularJs docs on ng-src) to have a dynamic image:

<img ng-src="{{field.params.customProperties.url}}"></img>

Note the syntax field.params.customProperties to get access to the non-default properties of the form field.

The Form editor template simply needs to be a generic depiction of an image or even simpler like here, just a bit of text

<i>The custom image here</i>

Don’t forget to add a property url to this stencil item with the name url and type text.

Sending feedback to the Alfresco documentation team

You don't appear to have JavaScript enabled in your browser. With JavaScript enabled, you can provide feedback to us using our simple form. Here are some instructions on how to enable JavaScript in your web browser.