This type of widget belongs to the Basic category in the widget library. It is used to build a page in the app using components linked to extracts of HTML code called snippets which are organized in a library. Page formatting is performed in the edit box where you can customize each component easily, e.g. changing an image or formatting the text.

Notes

     See General remarks on widgets

• Components are placed one below the other in the edit box and automatically occupy the entire width of the edit box.
• Components are numbered. The infotip displayed when the cursor moves over components in the library helps you identify them easily.

Caution

• No confirmation message will appear when you delete a component.

Best Practice

• To display several elements side by side, you should use a component divided into columns.

Edit box

Description

The edit box is made up of two zones:

• The component library (1):
  • The components are organized by theme accessible via a drop-down list (5).
  • All value displays all available components.
  • The name of the component is displayed when the cursor moves over it (6).
• The list of components inserted in the page (2).
  • Each component has a toolbar (1) that appears when you click the component. The toolbar is used to move the component , display its HTML code , duplicate the component  and delete it .
  • Each component can be made up of text (1), images (2), action buttons (3), icons for accessing different elements (4) (as social networks, Google, your email system, etc.). Contextual toolbars specific to each type of object can be used to customize the object (2), (3), (4).

Different types of components

Text

Select the text to display the toolbar at the top of the edit box (2).

• Text formatting: Bold/Italic/Underline/Strikethrough
• Choice of color
• Font size
• Cancel formatting
• Styles (Heading, Paragraph, Blockquote)
• Font
• Text justification
• Bullets and numbering
• Add or delete a link. Note: To modify the link, click the text and then click
• Link to an app page. Note: To modify the link, click the text and then click
• Link to an app page in a popup. Note: To modify the link, click the text and then click
• Data Picker (Note: Only if you selected a data source in the Data section)

Image

Move the cursor over the image to display the toolbar in the center of the image frame (3).

 : Used to modify the image properties.
         

• Image URL: URL of the image found on the local server or on the Internet. Note: If you do not want to display the component image, you should clear the URL.
• Alternate Text: Text displayed when the image cannot be found.
• Navigate URL: URL to open when you click the image. Note: The new page appears in the same window.

 : Used to select another image.

Objects with links

Move the cursor over an object (email or social network icons, action button or map, video, etc.) and click (4).
         

• URL: URL of the link to open when you click the object.

  example  

  • Email:  mailto:you@example.com
  • Twitter:  https://twitter.com
• Text (Note: Except for map or video objects): Name of the action button or icon defined using the <i class="myIcon"></i> command.

  example  

  • Twitter icon :  <i class="icon-twitter"></i>
  • Facebook icon :  <i class="icon-facebook"></i>
• Target (Note: Except for map or video objects): Used to indicate if the link should open in a new window of the web browser (New window box is checked) or not (box is not checked).

List of properties

Content

HTML: Click  to open the edit box  and access the component library.

Data

DataSource

DataTransformer

EnableDrilldown

Theme

     See List of properties

Procedure: How to use the HTML Composer widget

1. In the Content section, click  to open the edit box. Existing components will automatically be displayed.

2. In the component library:

• Select the component theme you want to display using the drop-down list (1).
• Click and drag the component you want (2) to one of the available spots which appear in gray when the cursor moves over the edit box (3).
            

3. Edit the layout of the new component.

• To format text, select the text and apply the changes you want using the toolbar  at the top of the edit box.
• To display the toolbar of the component, click the component. You can then:
  • Click and drag  the component to one of the available spots which appear in gray when the cursor moves over the edit box.
  • Display the HTML code of a component by clicking . Make the required modifications and click OK.
             
    • To cancel the modifications, click outside the HTML editor.
    • To format text easily, we recommend that you use the Text toolbar.
  • Duplicate a component by clicking . The new component will be inserted below.
  • Delete a component by clicking . Warning: No confirmation message will appear when you delete a component.
• To display the toolbar of an image, move the cursor over the image. You can then:
  • Replace the image by clicking  and selecting the one you want.
  • Modify the image properties by clicking .
• To modify the link of an object, click the object and then click .

4. You can also place all of the components you want first and then format them.

5. Click OK to save the changes made.

6. Switch to execute mode  to view the widget as it will appear to users.