Custom Widgets


Unlike other types of widgets in the widget library which are created and maintained by Logo - EasyVista.png, custom widgets are provided by Logo - EasyVista.png or defined by users. They can be used as widget templates for creating other widgets that can be reused in all apps.

  • Custom widgets can be created using any type of widget in the library, any widget in an app or any group of widgets in a given position (same row or column).
  • They automatically inherit all of the properties of the integrated widgets, arranged in the same sections and sub-sections.
  • They are saved with all of the elements required for running smoothly, such as data sources, images, menu labels and legends.
  • They can be:
    • Public, i.e. they are accessible to all users and are saved in the Custom Widgets category.
    • Private, i.e. they are accessible only to their creator and are saved in the My Custom Widgets category.
  • They can be grouped in sub-categories in order to facilitate management and organization by function.
  • They can be protected to prevent user modification by hiding the properties that should not be modified.
  • The import/export functionality enables you to export custom widgets from a test environment and import them to a production environment.

Notes

  • Certain standard custom widgets are shipped with the Product name - ev sas.png setup in the Custom Widgets category.
  • Logged-in users can access the My Custom Widgets category on any workstation.
  • The modification and deletion of a custom widget has no impact on widgets that are built using its template.
  • You cannot move custom widgets from one category to another. You can only move them from one sub-category to another within the Custom Widgets category or the My Custom Widgets category.
  • When no custom widget is associated with a given sub-category, it will not be displayed in the library.
  • Each custom widget can be associated with an icon that enables users to identify its function quickly.
    • All image formats are supported.
    • An icon gallery with SVG images is available in Product name - ev sas.png.
    • You can only modify the color of SVG images.
  • You can export custom widgets in the graphic editor. You can import themes in the App Gallery.

Caution

  • If you hide one of the properties of a custom widget using its Hidden property, the property will no longer appear in the relevant section when a new widget is created using this custom widget. Modifications can no longer be made, even if you are the creator.
  • When you create a widget using a custom widget linked to a data source, a search will be run to check if the data source exists in the list of data sources linked to the app.
    • If the data source has not been defined for the app, it will automatically be created if its components (query, view and filter) exist in the app database. 
    • If the data source has already been defined for the app, you should check that its components (query, view and filter) are identical to those for the custom widget to ensure that it will work correctly.

Best Practice big icon.pngBest practice

  • To use an existing widget in an Example app, we recommend that you create a custom widget with all of the required settings to ensure that it will run correctly in your environment .
  • We recommend that you use an alias to associate a data source with a database. It should point to a connector when the database does not change, regardless of the step in the deployment process.
  • You should hide the properties of a custom widget only if you are certain that you do not want to modify them subsequently.
  • To modify an existing custom widget, you must create a new app, insert the custom widget and then make the required modifications. You must save it as a custom widget using the same name. Open url.png See the procedure. If you change the name of the custom widget, you will create a new custom widget. 

Example

You want to insert a footer in all corporate web pages. The footer should have one section displaying contact information, the newsletter and tweets (1) and another section displaying the copyright (2).
         Apps - Custom widget - Example

1. Initialize the custom widget using the Secured HTML widget.

2. Define the properties of the widget:

  • Content > HTML Code: Enter the HTML code for the top section (1).
    Theme > Footer: Enter the HTML code for the bottom section (2).

3. Save the new widget as a custom widget. To prevent users from modifying the HTML code of these two properties, you can hide them.

4. In each new web page, insert the custom widget in the footer. All of the information will automatically be displayed with no configuration required.
 

Screen description

         Apps - Custom widget creator.png

Access: At the top of the widget's Properties Inspector, click Apps - Duplicate 2 icon.png.

Name: Name of the custom widget. Note: When you create a custom widget, a message will warn you if a custom widget with the same name already exists.

Status: Used to indicate if the custom widget is public and can be used by all users (Public icon.png Public) or if it is private and visible only to the creator (Private icon.png Private).

Sub-Categories: Sub-category in which the custom widget is saved.

  • The drop-down list displays all existing sub-categories either in the Custom Widgets category if your custom widget is public, or in the My Custom Widgets category if it is private. 
  • To create a new sub-category, click [ + ] and enter its name. Next, click [ ADD ]. It will be added to the Custom Widgets category if your custom widget is public, or to the My Custom Widgets category if it is private. 
  • Within the Custom Widgets category or the My Custom Widgets category, you can click and drag custom widgets to move them from one sub-category to another.

Icon: Used to select the icon associated with a custom widget by clicking Wheel icon.png. Select the icon from the icon gallery or enter the URL of the image.

Icon Color: Used to modify the background color of an SVG image by clicking Apps - Color Picker icon Off.png and using the color palette or by entering its hexadecimal code.
         Example documentation icon EN.png  #0b0df0 = blue.

List of custom widget properties grouped by section: If you want a property to become non-modifiable or hidden in the custom widget's list of properties, you should open the section to which it belongs and select the Hidden box.

Procedures

How to define a custom widget

1. Using an existing widget:

  • Go to the app that uses the widget you want.
  • Select the widget and click Apps - Duplicate 2 icon.png in the Properties Inspector.
  • In the Custom Widget Creator dialog box, specify the properties of the new custom widget and click [ OK ]. It will be added to the widget library in the selected category or sub-category.

2. Using a group of widgets positioned in a given column or row:

  • Go to the app that uses the group of widgets you want.
  • If you want to modify access to properties in sections for one of the widgets, you should do it before creating the new group. You should create another custom widget by duplicating the widget you want to modify and replacing it within the group.
    • Click the widget you want to modify (1) and click Apps - Duplicate 2 icon.png in the Properties Inspector.
    • In the Custom Widget Creator dialog box, modify access to the properties of sections and click [ OK ]. A new custom widget will be added  to the widget library in the selected category or sub-category.
    • Click and drag the new custom widget (2) below the widget that was used as a template (1).
    • Delete the widget that was used as a template (1).
               Apps - Custom widget - Create example 2.png
  • Create a new custom widget using the group of widgets.
    • Move the mouse over the title bar of the row or column and click Wheel icon.png to display the contextual menu.
               Apps - Custom widget - Create example 1.png
    • Click Apps - Duplicate 2 icon.png Create Custom Widget.
    • In the Custom Widget Properties dialog box, specify the properties of the new custom widget and click [ OK ]. It will be added to the widget library in the selected category or sub-category.

How to manage custom widgets

1. To display existing custom widgets:

  • Go to the App Gallery and edit an app using Apps - Application properties icon.png.
  • Open the widget library using Apps - Add widget icon.png
  • Select the Custom Widgets category or one of its sub-categories to display public objects.
  • Select the My Custom Widgets category or one of its sub-categories to display private objects.

2. To modify or delete a custom widget:

  • Display the contextual menu of the theme you want by moving the mouse over it and then click v.
            Apps - Custom widget - Library.png
  • To modify its properties, select Apps - Edit icon.png Edit Properties.
            Apps - Custom widget - Editor.png

Best Practice icon.png  To modify access to properties in its sections, you should create another custom widget. Duplicate the widget you want to modify and click Apps - Duplicate 2 icon.png in the Properties Inspector. Make the required modifications. Save the new custom widget using the same name and in the same category as the widget that was used as a template.

  • Click Apps - Delete icon.png Delete to delete it.

3. To move a custom widget from one sub-category to another:

  • Open the Custom Widgets category or the My Custom Widgets category in which the custom widget was saved.
  • You can click and drag the custom widget to the new sub-category. The sub-categories to which you can move it appear in green.
  • You can also display the contextual menu of the custom widget and select Apps - Edit icon.png Edit Properties from the contextual menu. Next, select the new sub-category.

4. To export a custom widget:

  • Display the contextual menu of the theme you want by moving the mouse over it and then click v.
  • Click Download icon.png Export.

Standard custom widgets shipped with the setup

    Open url.png  See also the custom widgets dictionary.

Global Search in KB

Used to access the knowledge base by implementing a search field in the same way as the Knowledge Base widget.

Global Search Result

Used to display the results for a Full Text Search in the knowledge base.

         Open url.png  see  Description

Update Incident Wizard

Used to update the description of an incident Product name - ev itsm.png and the history of changes.

         Open url.png  see  Description

Close Incident Wizard

Used to close an Product name - ev itsm.png incident early.

         Open url.png  see  Description

Tags:
Last modified by Unknown User on 2017/05/24 10:25
Created by Administrator XWiki on 2015/04/15 17:04

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 2018