Html Composer Widget

Last modified on 2023/07/27 12:35

Note: This type of widget is not available any more since Service Apps Phosphorus version. Nevertheless, it continues to work on all the applications which use it.

Apps - Widget - Html Composer icon.png 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

   Open url.png  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 Apps - Widget - Html Composer move icon.png, display its HTML code Apps - Widget - Html Composer show html icon.png, duplicate the component Apps - Widget - Html Composer duplicate icon.png and delete it Apps - Widget - Html Composer delete icon.png.
    • 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).

          Apps - Widget - Html Composer edition zone.png

Different types of components

Text

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

          Apps - Widget - Html Composer text toolbar.png

  • 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 Apps - Widget - Html Composer edit link icon.png
  • Link to an app page. Note: To modify the link, click the text and then click Apps - Widget - Html Composer edit link icon.png
  • Link to an app page in a popup. Note: To modify the link, click the text and then click Apps - Widget - Html Composer edit link icon.png
  • 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).

Apps - Widget - Html Composer properties image icon.png : Used to modify the image properties.
         Apps - Widget - Html Composer properties image.png

  • 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.

Apps - Widget - Html Composer change image icon.png : Used to select another image.

Move the cursor over an object (email or social network icons, action button or map, video, etc.) and click Apps - Widget - Html Composer edit link icon.png (4).
         Apps - Widget - Html Composer edit link.png

  • 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 Apps - Twitter icon.png:  <i class="icon-twitter"></i>
    • Facebook icon Apps - Facebook icon.png:  <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 Apps - Edit Html icon.png 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 Apps - Edit icon.png. The Apps - datasources Properties - Preview button.png button below the Preview property shows the number of rows (max. 15) and columns extracted.
  • To define a new data source, click Apps - Add datasource icon.png 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. Open url.png 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.

Best Practice icon.png  

  • If you want the widget to display the breakdown in a grouping level, you should not check this box.
  • Add a Breadcrumb widget to facilitate navigation within grouping levels.

Theme

   Open url.png  See List of properties

 

Procedure: How to use the HTML Composer widget

1. In the Content section, click Apps - Edit Html icon.png 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).
              Apps - Widget - Html Composer drag and drop.png

3. Edit the layout of the new component.

  • To format text, select the text and apply the changes you want using the toolbar Apps - Widget - Html Composer text toolbar.png at the top of the edit box.
  • To display the toolbar of the component, click the component. You can then:
    • Click and drag Apps - Widget - Html Composer move icon.png 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 Apps - Widget - Html Composer show html icon.png. Make the required modifications and click OK.
               Apps - Widget - Html Composer show html.png
      • 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 Apps - Widget - Html Composer duplicate icon.png. The new component will be inserted below.
    • Delete a component by clicking Apps - Widget - Html Composer delete icon.png. 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 Apps - Widget - Html Composer change image icon.png and selecting the one you want.
    • Modify the image properties by clicking Apps - Widget - Html Composer properties image icon.png.
  • To modify the link of an object, click the object and then click Apps - Widget - Html Composer edit link icon.png.

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 EVApps - GUI - Execute icon.png to view the widget as it will appear to users.

Tags:
Powered by XWiki © EasyVista 2022