Widget Library


Apps - Manage widgets icon.png  The widget library contains all widget types that are used to create new widgets.

  • Each widget identifies a component:
    • Graphic components used to define the visual aspect of the app such as buttons, menus, slideshows, etc.
    • Interactive components related to external data from data sources used to view information in charts, tables, lists or reports, to implement Product name - ev itsm.png functionalities, and to integrate social content. 
  • Widget types are arranged by category.
  • Each widget has properties specific to its category.

Notes

  • Widget types are created and maintained by Logo - EasyVista.png.
  • Only custom widgets can be defined by users.

    Open url.png  See General remarks on widgets

List of widget types

Layout category

Used to define the position of widgets in the app.

Icons Category | Functionality
Apps - Widget - Layout 12 icon.png, Apps - Widget - Layout 6 icon.png, Apps - Widget - Layout 4 icon.png, Apps - Widget - Layout 3 icon.png, Apps - Widget - Layout 2 icon.png Layout Used to create positions using 12, 6, 4, 3 or 2 columns.

Basic category

Used to define widgets related to the visual aspect of the app.

Icon Category | Functionality
Apps - Widget - Accordion icon.png Accordion Used to group information within sections in a multilevel menu.
Apps - Widget - Authentication icon.png Authentication Used to position the user information zone Apps - Authentication zone.png anywhere on the screen.
Apps - Widget - Button icon.png Button Used to implement an action button that can run another app, open an email or access a web page, app page or page in another app.
Apps - Widget - Data Viewer icon.png Data Viewer Used to view data from a data source in tables, lists, tiles or forms.
Apps - Widget - Html icon.png HTML Script Used to insert HTML code for displaying pages, external components, scripts, etc.
Apps - Widget - Menu icon.png Menu Used to implement a menu that groups categories of links to other pages or commands, etc.
Apps - Widget - Page icon.png Page Used to implement an action button that enables access to an app page.
Apps - Widget - Secured Html icon.png Secured HTML Used to insert HTML code for displaying information and data from a data source without using scripts.
Apps - Widget - Sliding Image icon.png Sliding Image Used to integrate a slideshow of images.
Apps - Widget - Sliding Page icon.png Sliding Page Used to integrate a slideshow of app pages.
Apps - Widget - Sliding Panel icon.png Sliding Panel Used to integrate a slideshow of pages that can contain HTML code, images, links to the app or to another app.
Apps - Widget - Horizontal Tab icon.png Tab Used to group information in horizontally or vertically displayed tabs.

Dashboards category

Used to define widgets that enable you to view data from data sources in charts so that you can compare and analyze trends more effectively than with raw data.

Note: Advanced widgets enable you to use numerous properties to format charts, e.g. display and format the chart title and axes, define the position of the legend, use the color palette, format axis labels, display tooltips, etc.

Icon Category | Functionality
Apps - Widget - Advanced Area Chart icon.png Advanced Area Chart Used to compare elements displayed in areas of different colors.
Apps - Widget - Advanced Bar Chart icon.png Advanced Bar Chart Used to compare elements using horizontal bars.
Apps - Widget - Advanced Column Chart icon.png Advanced Column Chart Used to compare elements using vertical columns.
Apps - Widget - Advanced Line Chart icon.png Advanced Line Chart Used to represent changes or trends using lines.
Apps - Widget - Advanced Multi Chart icon.png Advanced Multi Chart Used to combine different types of charts by adding a secondary measure axis to improve readability.
Apps - Widget - Advanced Spline Chart icon.png Advanced Spline Chart Used to represent changes or trends using a curve.
Apps - Widget - Bar Chart icon.png Bar Chart Used to compare elements using horizontal bars or vertical columns.
Apps - Widget - Benchmark Chart icon.png Benchmark Chart Used to compare the reference element with other elements using horizontal bars.
Apps - Widget - Bullet Chart icon.png Bullet Chart Used to compare a value with a reference value using horizontal bars.
Apps - Widget - Gauge Chart icon.png Gauge Used to place a value on a semicircular gauge with quantitative thresholds in different colors.
Apps - Widget - Google Maps icon.png Google Maps Used to locate positions related to statistical data on a map.
Apps - Widget - KPI icon.png KPI Used to view the performance metrics of an element using trends.
Apps - Widget - Line Chart icon.png Line Chart Used to represent changes or trends using lines.
Apps - Widget - Pie Donut Chart icon.png Pie/Donut Chart Used to view the quantity of each element using segments.

Social category

Used to define widgets that integrate social content (e.g. text, images or videos).

Icon Category | Functionality
Apps - Widget - Slideshare icon.png SlideShare Used to integrate a document available on SlideShare.
Apps - Widget - Twitter icon.png Twitter Used to embed Twitter timelines.
Apps - Widget - Vimeo icon.png Vimeo Used to embed videos posted on Vimeo.
Apps - Widget - Youtube icon.png YouTube Used to embed videos posted on YouTube.

EasyVista category

Used to define widgets with Product name - ev itsm.png functionalities.

Icon Category | Functionality
Apps - Widget - Breadcrumbs icon.png Breadcrumbs Used to facilitate navigation within aggregated Product name - ev itsm.png data.
Apps - Widget - Discussion icon.png Discussion Used to implement the discussions module.Product name - ev itsm.png
Apps - Widget - Filter List icon.png Filter List Used to display a list of filters linked to a Product name - ev itsm.png data source that is applicable to all widgets in the app linked to the same data source.
Apps - Widget - KB Base icon.png Knowledge Base Used to implement a Full Text Search in the knowledge base.
Apps - Widget - Search Filter icon.png Search Filter Used to display a search field linked to a Product name - ev itsm.png data source column that is applicable to all widgets in the app linked to the same data source.
Apps - Widget - Self Help icon.png Self Help Used to integrate a procedure. Product name - ev Self Help.png

Custom Widgets category

Used to group all public custom widgets, i.e. accessible to all users. 

They can be grouped in sub-categories in order to facilitate management and organization.

         Open url.png  See also the custom widgets dictionary.

My Custom Widgets category

Used to group all private custom widgets, i.e. accessible to the creator. 

They can be grouped in sub-categories in order to facilitate management and organization.

Procedures

How to add a widget to an app

       Open url.png See Description of the graphic editor

Step 1: Select the page to which you want to add the widget.

  • Select the page from the drop-down list found in the graphic editor toolbar.

    or

  • Click Apps - Manage pages icon.png in the Objects pane.
  • Click the name of the page.

The Objects pane will display the contents of the page.

Step 2: Add a layout.

1. Click Apps - Add widget icon.png Add Widget in the Objects pane.

2. Click and drag one of the widgets from the Layout category Apps - Widget - Layout 12 icon.png, Apps - Widget - Layout 6 icon.png, Apps - Widget - Layout 4 icon.png, Apps - Widget - Layout 3 icon.png, Apps - Widget - Layout 2 icon.png to the Design pane.
Note: The positions available will appear in green with the words Drop a Layout Widget Here.
         GUI - Procedure - Add widget 1.png

Step 3: Add a new widget.

1. Click Apps - Add widget icon.png Add Widget in the Objects pane.
The widget types available are arranged by category.
                 Apps - Types widgets.png

2. Click and drag the widget type or custom widget to the Design pane. (Note: The positions available will appear in green with the words Drop a Layout Widget Here.

Best Practice icon.png You can use the Apps - Search icon.png search field at the top of the Properties Inspector to filter widget types using their name.

         GUI - Procedure - Add widget 2.png

3. Rename the new widget so you can identify it easily.
 

Step 3: Define the properties of the new widget.

1. Go to the relevant sections in the Properties Inspector.

2. Specify the properties of the new widget.
Modifications will automatically be taken into account and displayed in the Design pane.
         GUI - Inspector properties - Widget.png

How to modify a widget in an app

Step 1: Select the page where the widget is placed.

  • Select the page from the drop-down list found in the graphic editor toolbar.

    or

  • Click Apps - Manage pages icon.png in the Objects pane.
  • Click the name of the page.

The Objects pane will display the contents of the page.

Step 2: Select the widget you want to modify.

  • Click Apps - Manage widgets icon.png Widgets in the Objects pane.
  • Click the name of the widget.

    or

  • Click the widget in the Design pane.

The Properties Inspector will display information on the selected widget.
 

Step 3: Modify the properties of the widget.

1. Go to the relevant sections in the Properties Inspector.

2. Modify the properties of the widget:
Modifications will automatically be taken into account and displayed in the Design pane.

How to delete a widget in an app

Step 1: Select the page where the widget is placed.

  • Select the page from the drop-down list found in the graphic editor toolbar.

    or

  • Click Apps - Manage pages icon.png in the Objects pane.
  • Click the name of the page.

The Objects pane will display the contents of the page.

Step 2: Delete the widget.

  • Click Apps - Manage widgets icon.png Widgets in the Objects pane.
  • Click Apps - Delete icon.png next to the widget.

    or

  • Move the cursor over the widget in the Design pane.
  • Click Wheel icon.png > Apps - Delete icon.png Remove widget.
              GUI - Procedure - Delete widget.png
CreateSingleWidgetProcedure

How to create a custom widget using an existing widget

Step 1: Open the app in the graphic editor.

1. Go to the App Gallery.

2. Click Apps - Application properties icon.png in the app toolbar.
The graphic editor will appear.
 

Step 2: Select the widget to be used as a template.

1. Display the page where the widget is placed.

2. Select the widget you want to use as a template for creating the custom widget.
The Properties Inspector will display information on the selected widget.
 

Step 3: Create the custom widget.

1. Click Apps - Duplicate 2 icon.png in the title bar of the Properties Inspector.
The screen for creating a custom widget will appear.
         Apps - Custom widget - Creation from widget.png

2. Specify the properties of the new custom widget. Open url.png See Screen description.

3. Click OK.
The new custom widget will appear in the app widget library in the My Custom Widgets category.
         Apps - Custom widget - Library.png

CreateGroupWidgetsProcedure

How to create a custom widget using a group of widgets

Note: The widgets must be positioned in the same column or row.

Step 1: Open the app in the graphic editor.

1. Go to the App Gallery.

2. Click Apps - Application properties icon.png in the app toolbar.
The graphic editor will appear.
 

Step 2 (optional): Modify access to hidden properties for one of the widgets

Note: The hidden properties of the widget (specified using the Hidden property) will no longer appear in the relevant section. If you want to show the properties for the custom widget, you should create another custom widget using the widget template and replace it in exactly the same spot. You should do this before creating the new group.

1. Display the page where the widget template is placed.

2. Select the widget (1).
The Properties Inspector will display information on the selected widget.

3. Create a new custom widget using the widget template.

  • Click Apps - Duplicate 2 icon.png in the Properties Inspector.
    The Custom Widget Creator dialog box will appear.
  • Modify access to properties in the relevant sections.
  • Click OK.
    The new custom widget will appear in the widget library in the selected category and sub-category.

4. Place the new custom widget in the same spot as the widget used as a template.

  • Click and drag the new custom widget (2) below the widget used as a template (1).
  • Delete the widget template (1).
             Apps - Custom widget - Create example 2.png
     

Step 3: Create a new custom widget using the group of widgets.

1. Move the cursor over the title bar of the row or column containing the group of widgets used as a template.

2. Click Wheel icon.png to display the contextual menu.
         Apps - Custom widget - Create example 1.png

3. Click Apps - Duplicate 2 icon.png Create Custom Widget.
The Custom Widget Properties dialog box will appear.

4. Specify the properties of the new custom widget.

5. Click OK.
The new custom widget will appear in the widget library of the app.

Tags:
Last modified by Christine Daussac on 2019/04/01 20:16
Created by Administrator XWiki on 2014/09/02 11:42

Shortcuts

Recent Updates

Haven't been here in a while? Here's what changed recently:

-   Product name - ev itsm.png
-   Product name - ev sas.png

Interesting Content

How to Automate Integration
Add a Shortcut to an App
History
Quick Dashboard
Full text search - Stop Words

Powered by XWiki ©, EasyVista 2019