Html Composer Widget
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).
- Each component has a toolbar (1) that appears when you click the component. The toolbar is used to move the component
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>
- Twitter icon
- 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
Data Source: External data source associated with the widget.
- The drop-down list displays all of the data sources available in the app.
- To modify the data source or to view its contents, you should click
. The
button below the Preview property shows the number of rows (max. 15) and columns extracted.
- To define a new data source, click
Add Data Source in the Objects pane.
DataTransformer
Data Transformer: Used to define the structure and scope of the data source, apply statistical aggregate functions and modify the order of the measures displayed.
- Click Setup / Preview Data below the Data Transformer property to open the dedicated window.
See the description.
EnableDrilldown
Enable Drilldown (Note: Only for an EasyVista data source data source using a view with grouping levels): Used to indicate if data is aggregated (box is checked - the drill-down functionality is enabled) or not (box is not checked).
example Breadcrumbs widget: Breakdown of equipment by location.
Theme
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.
- Click and drag
- 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
.
- Replace the image 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.