The widget library groups all widget types available in the graphic editor that you can use to create an app.

Widget types are arranged by category. You can use them to:

• Define the visual aspect of the app, e.g. add buttons, menus, slideshows, etc. 
• Retrieve data from data sources and view this data in charts, tables, lists, reports, etc.
• Implement functionalities from Service Manager, Self Help or Service Bots.
   

Each widget created from a widget type has characteristics specific to its category. This is described in the relevant wiki page.

Notes

      See General remarks on widgets

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

List of widget types

Layout category

Used to define the position of widgets in the app.

Icons	Widget type		Functionality
, , , ,	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	Widget type		Functionality
	Accordion		Used to group information within sections in a multilevel menu.
	Authentication		Used to position the user information zone anywhere on the screen.
	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.
	Data Viewer		Used to view data from a data source in tables, lists, tiles or forms.
	Embedded Page		Used to call a child page from a parent page in the same app. The child page will be displayed within the parent page.
	HTML Script		Used to insert HTML code for displaying pages, external components, scripts, etc.
	Menu		Used to implement a menu that groups categories of links to other pages or commands, etc.
	Page		Used to implement an action button that enables access to an app page.
	Secured HTML		Used to insert HTML code for displaying information and data from a data source without using scripts.
	Sidebar		Used to call a child page from a parent page in the same app. The child page will be displayed in a vertical or a horizontal pane.
	Sliding Image		Used to integrate a slideshow of images.
	Sliding Page		Used to integrate a slideshow of app pages.
	Sliding Panel		Used to integrate a slideshow of pages that can contain HTML code, images, links to the app or to another app.
	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	Widget type		Functionality
	Advanced Area Chart		Used to compare elements displayed in areas of different colors.
	Advanced Bar Chart		Used to compare elements using horizontal bars.
	Advanced Column Chart		Used to compare elements using vertical columns.
	Advanced Line Chart		Used to represent changes or trends using lines.
	Advanced Multi Chart		Used to combine different types of charts by adding a secondary measure axis to improve readability.
	Advanced Spline Chart		Used to represent changes or trends using a curve.
	Bar Chart		Used to compare elements using horizontal bars or vertical columns.
	Benchmark Chart		Used to compare the reference element with other elements using horizontal bars.
	Bullet Chart		Used to compare a value with a reference value using horizontal bars.
	Funnel Chart		Used to view values in a funnel chart or pyramid chart with necks.
	Gauge		Used to place a value on a semicircular gauge with quantitative thresholds in different colors.
	Google Maps		Used to locate positions related to statistical data on a map.
	KPI		Used to view the performance metrics of an element using trends.
	Line Chart		Used to represent changes or trends using lines.
	Pie/Donut Chart		Used to view the quantity of each element using segments.
	Pyramid Chart		Used to view hierarchical data in pyramid comprising horizontal sections.
	Tag Cloud		Used to view data values graphically and analyze the frequency of keywords.
	Treemap Chart		Used to view hierarchical data in rectangles.

Social category

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

Icon	Widget type		Functionality
	SlideShare		Used to integrate a document available on SlideShare.
	Twitter		Used to embed Twitter timelines.
	Vimeo		Used to embed videos posted on Vimeo.
	YouTube		Used to embed videos posted on YouTube.

EasyVista category

Used to define widgets with Service Manager / Self Help / Service Bots functionalities.

Icon	Widget type		Functionality
	Breadcrumbs		Used to facilitate navigation within aggregated Service Manager data.
	Discussion		Used to implement the Service Manager discussions module.
	Filter List		Used to display a list of filters linked to a Service Manager data source that is applicable to all widgets in the app linked to the same data source.
	Knowledge Base		Used to implement a Full Text Search in the knowledge base.
	Search Filter		Used to display a search field linked to a Service Manager data source column that is applicable to all widgets in the app linked to the same data source.
	Self Help		Used to integrate a Self Help procedure.
	Virtual Agent		Used to integrate a call button for a virtual assistant in Service Apps.

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.

           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

        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  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 Add Widget in the Objects pane.

2. Click and drag one of the widgets from the Layout category , , , ,  to the Design pane.
Note: The positions available will appear in green with the words Drop a Layout Widget Here.
         

Step 3: Add a new widget.

1. Click Add Widget in the Objects pane.
The widget types available are arranged by category.
                 

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.

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.
         

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  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 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  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 Widgets in the Objects pane.
• Click  next to the widget.

    or

• Move the cursor over the widget in the Design pane.
• Click  > Remove widget.
            

CreateSingleWidgetProcedure

CreateGroupWidgetsProcedure