Custom Widgets


These types of widgets can be used as widget templates for creating other widgets that can be reused in all apps. They are created using a widget from an app, or from a group of widgets in a given position (same row or column).

  • A custom widget library is provided by Logo - EasyVista.png. Open url.png See the list.
    Each user can also create custom widgets.
  • Custom widgets are saved with all elements required for running smoothly, such as data sources, images, menu labels and legends.
  • They automatically inherit the properties of the integrated widgets, arranged in the same sections and sub-sections.
  • 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.

Other functionalities

  • Grouped in sub-categories in order to facilitate management and organization by function.
  • Properties can be hidden to prevent user modification.
  • Associated with an icon so the function of the custom widget can be easily identified.
  • The import/export functionality enables you to export the objects from a test environment and import them to a production environment.

Notes

  • The modification and deletion of a custom widget has no impact on widgets that are built using its template.
  • You can move custom widgets only from one sub-category to another within the Custom Widgets category or the My Custom Widgets category.
  • You can export custom widgets in the graphic editor. You can import them in the App Gallery.

Caution

  • If you hide one of the properties of a custom widget, 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 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 as a template, 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 display contact information, the newsletter, tweets (1) and 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.
 Widget - Duplicate.png

Name: Name of the custom widget.

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.

  • You can click + to add sub-categories in each of the two categories, Custom Widgets (public custom widgets) and My Custom Widgets (private custom widgets).
  • Within the two categories, you can click and drag custom widgets to move them from one sub-category to another.
     

Icon: Icon associated with the custom widget.

  • Click Wheel icon.png to select it.
  • You can select the icon from the icon gallery (SVG image) or you can download an external image in any format.
     

Icon Color: Background color of the icon associated with the custom widget.

  • You can only modify the color of SVG images.
  • You can select the icon color by clicking Apps - Color Picker icon Off.png to open the Color Picker or by entering its hexadecimal code.
             Example documentation icon EN.png  #0b0df0 = blue
     

List of sections

  • Each section contains custom widget properties.
  • Hidden: Used to hide the property to prevent user modification (box is checked) or to leave the property visible (box is not checked).

Procedures

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

EndCreateSingleWidgetProcedure

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.

EndCreateGroupWidgetsProcedure

How to manage custom widgets

Consult the custom widget library

1. Go to the App Gallery.

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

3. Open the widget library using Apps - Add widget icon.png.

  • The Custom Widgets category groups all public objects arranged by sub-category.
  • The My Custom Widgets category groups all private objects arranged by sub-category.

Modify a custom widget

1. Move the cursor over the custom widget in the Objects pane.

2. Click V to display the contextual menu.
        Apps - Custom widget - Library.png

3. Click Apps - Edit icon.png Edit Properties.
The screen for editing a custom widget will appear.
        Apps - Custom widget - Editor.png

4. Modify the properties you want.

5. Click OK.

Note: To modify access to hidden properties, you should create another custom widget.

  • Display the widget to be used as a template for creating the custom widget.
  • Click Apps - Duplicate 2 icon.png in the Properties Inspector.
  • Make the required modifications.
  • Save the new custom widget in the same category with the same name as the previous custom widget.

Delete a custom widget

1. Move the cursor over the custom widget in the Objects pane.

2. Click V to display the contextual menu.

3. Click Apps - Delete icon.png Delete.

Export a custom widget

1. Move the cursor over the custom widget in the Objects pane.

2. Click V to display the contextual menu.

3. Click Download icon.png Export.

Move a custom widget type to a new sub-category

1. Open the Custom Widgets category or the My Custom Widgets category where the custom widget type is found.

2. Click and drag the custom widget type to the new sub-category.
Note: The sub-categories where it can be moved will appear in green.

or

2. Click V to display the contextual menu.

3. Click Apps - Edit icon.png Edit Properties.

4. Select the new sub-category.

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 the description.

Update Incident Wizard

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

         Open url.png  See the description.

Close Incident Wizard

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

         Open url.png  See the description.

Tags:
Last modified by Unknown User on 2019/04/01 20:16
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 2019