The Graphic Editor of Apps


Each app is built using the graphic editor that enables you to select objects from different libraries. These objects, which can be data sources, widgets or custom widgets, can then be defined in the Properties Inspector.

  • The version management functionality allows you to switch to an earlier version of the app at any time.
  • You can use a theme to apply a style guide to the app which can be divided into different pages.
  • You can see a simulated display of the app depending on the device used (e.g. PC, smartphone, tablet or TV). The objective is to design a single interface that can automatically adapt to the screen resolution of the device.

Once the app is built, it can be distributed to users via a URL link or shortcut. It can include exposed properties for filtering and accessing one or more specific records directly from a data source.

Notes

  • Widgets using dynamic data sources are automatically updated each time the graphic editor is opened and each time the page is redisplayed.
  • Exposed properties are displayed in the Application properties window of the app.
    • Only certain objects have exposed properties. The list is defined by Logo - EasyVista.png.
    • All exposed properties of objects present in the app will automatically appear.
    • Each object can have several exposed properties. 
    • Shortcuts take into consideration the exposed properties of the apps to which they point. Only the records corresponding to the relevant property values will be displayed.

Version management

  • The version history EVApps - GUI - History icon.png contains:
    • Restore points that were manually created in the version history (Add Backup field). These are limited in number.
    • Automatic backups created each time the app is opened in the graphic editor. Their names are as follows: Saved before editing by {Connected_User}.
    • Manual backups created via EVApps - GUI - Save icon.png. Their names are as follows: Saved by {Connected_User}.
  • The name of each backup is followed by the creation date and time.
  • Versions that have not been manually deleted are stored as long as the app is not deleted.
  • Regular backups are also automatically performed by the system based on a specific frequency. These do not appear in the version history.
  • You can return to an earlier version of the app at any time by selecting the version you want.
  • In the event of an unexpected shutdown of the system or app, the system will recover the last version of the app. This may be the last backup performed automatically by the system or the last manual backup.

Best Practice big icon.pngBest practice

  • We strongly recommend that you create a restore point using EVApps - GUI - History icon.png prior to modification because modifications cannot be canceled or undone.
  • To enable an app to run without a parameter, using a URL, specify the default values in the exposed properties.
BestPracticeShow
  • All of the apps that a user can access via EVApps - Execution - List Applications icon.png are automatically loaded when an app is run. To ensure optimal performance, if you do not want all of these apps to be loaded, you can hide the icon in the Show App List property. Open url.png See general properties.
EndBestPracticeShow

Description of the graphic editor

Access: In the App Gallery, click Apps - Application properties icon.png next to the app to be modified.

The screen is divided into four zones:

  • The toolbar (1), used to define general app properties, manage versions and simulate displays on devices.
  • The Objects pane (2), used to manage pages, widgets or data sources.
  • The Design pane (3), a workspace for defining the layout of app widgets.
  • The Properties Inspector (4), a contextual menu specific to each app object, used to configure and define its behavior on screen.
             EVApps - GUI.png

Toolbar

     EVApps - GUI - Toolbar.png

EVApps - GUI - Close Application icon.png: Used to close the graphic editor and return to the App Gallery.


Apps - Application properties icon.png : Used to display the general app properties.
         EVApps - GUI - Application Properties.png

  • Apps Icon tab: Used to upload the icon associated with the app in the App Gallery using Upload icon.png.
Tab Display in the App Gallery
Application Properties - Apps icon tab.png Application Properties - Apps icon tab - Gallery example.png

Note: Once the image has been uploaded, you can crop it as required.

  • Move the cursor over the image and click Apps - Crop icon.png.
  • Click and drag to select the part of the image you want to keep and click [ CROP IMAGE ].

         Application Properties - Apps icon tab - Crop.png

  • Apps Header tab:  In execute mode, this indicates whether or not the app title bar will display a title or a logo. Name option: The title displayed is taken from the Display Name field. Logo option: Upload the logo by clicking Upload icon.png.
Tab Display in the title bar
Application Properties - Apps header tab.png

Name option

Apps - Title bar with title.png

Logo option

Apps - Title bar with logo.png

Best Practice icon.png Use an image whose aspect ratio has a landscape orientation for an optimal display of the logo. Note: Images will automatically be compressed when displayed to ensure optimal system performance.
  • Favicon tab: Used to select the icon displayed in the tab bar of the Web browser or as a shortcut on the Desktop.
    • Upload icon.png : Used to select the image you want. The image is automatically uploaded in different resolutions to adapt its display to different devices. The appropriate resolution is automatically selected when users run the app on their device or install the shortcut on their Desktop.
    • Apps - Remove uploaded file icon.png : Used to delete all uploaded resolutions.
       
Tab Display in the tab bar Display on the Desktop
Application Properties - Favicon tab.png Application Properties - Favicon tab - Tab example.png

Open url.png See Create a shortcut to an app on a smartphone or PC.

Note: You can select a different image for a given resolution. 

  •  Move the cursor over the resolution you want to modify.
  • Click Upload icon.png and select the image you want.
Application Properties - Favicon tab - one resolution.png

Favicon - Download ok.png : Used to indicate that the image in this resolution is different from the original one.

Favicon - Delete resolution.png : Used to return to the original image in the selected resolution.

  • Name: Name of the app displayed in the App Gallery.
  • Display Name: Name of the app displayed in the title bar in execute mode.
  • Theme: App style guide used to define background colors, borders or fonts for all objects (pages, widgets, etc.).
    • When you select a theme, the changes are automatically reflected in the Design pane.
    • A list of themes is defined by Logo - EasyVista.png.
    • You can define a specific configuration for the page or widget using the Theme category properties.
  • Description: Short description of the app displayed in the App Gallery.
  • Choose an execution context: Name of the current execution context indicating the database in which the app will run.
    • Execution contexts are defined in connectors
    • If the execution context is not specified and if aliases were defined for data sources, then the app will run using the default values of these aliases.
  • This application never disconnects: Indicates if the Product name - ev sas.png account should disconnect automatically after a specified idle time (box is not checked) or if it should remain connected all the time (box is checked).

    Best Practice icon.png For security reasons, we recommend that you restrict the use of this option to apps displayed on screens such as those used in the Service Desk operations center or for announcements in public places. You should not use the option for apps where logged-in users can create or manipulate data because they may not be the ones running the app.

OptionsShow
  • Show Main Toolbar: In execute mode, this indicates if the app title bar should be displayed (box is checked) or not (box is not checked).
  • Show App List: Only when the Show Main Toolbar option is enabled (box is checked). This is used to determine if the EVApps - Execution - List Applications icon.png icon is displayed in execute mode. It enables you to show or hide the list of apps that users can access. The icon is displayed if the box is checked, and hidden if the box is not checked.
Properties Display in execute mode
  • Show Main Toolbar: Box is checked
  • Show App List: Box is checked
Properties title bar - Show all.png
  • Show Main Toolbar: Box is checked
  • Show App List: Box is not checked
Properties title bar - Show main toolbar On - Show app list Off.png
  • Show Main Toolbar: Box is not checked
  • Show App List: Box is checked or box is not checked
Properties title bar - Show nothing.png
EndOptionsShow

 

  • Choose a public User: Public user associated with the app, used to define public pages, i.e. pages containing data accessible to all users, and private pages, i.e. pages that contain data requiring user authentication. Open url.png See Public mode.
    • Public users have a specific profile that is enabled in Access Management.
    • Click Apps - Delete icon.png to remove the Public user from the app and make it private. If this is the case, the app will only be accessible to users authorized to consult it.
  • Help Link: URL of the help page associated with the app.
    • Click the name to display the data entry field. 
    • In execute mode, when a URL is specified, the Apps - Help icon.png icon will appear in the app title bar.
       
  • [ EXPOSED PROPERTIES ]: Used to access exposed properties which are parameters that can be passed in the app URL in order to apply a filter or view, or to access specific records directly. Once the properties are defined, the URL link can be generated. Open url.png See the examples and the procedure.
             EVApps - GUI - Exposed properties.png
    • The parameters passed in the URL will apply to all widgets in the app.
      • All widgets pointing to a data source where one of the exposed properties is passed as a parameter in the URL will be filtered.
      • If a parameter value is passed in the URL, only the records of widgets with this value will be accessible.
    • Each exposed property is linked to a property (Property name) specific to an object (Widget name). It is made up of a parameter referenced using an alias (URL parameter alias) and the value to be applied (Content/Value).
      • Use the parameter alias to give an easily identifiable name to the exposed property. Double-click the cell to modify the default name.

        Best Practice icon.png For security reasons, you should specify anonymous parameter aliases such as Param1, Param2, etc.

      • Values can be character strings, GUID, etc. Double-click the cell to modify the value.
      • The values specified for the object (e.g. filter value, search field, etc.) are displayed as default values.

        Example documentation icon FR.png  Employees List data source using the Location view ==> Exposed property value View = {F9CDD0AB-C29A-4013-BF84-FA1D260BCA8D}

    •  You can also access exposed properties by clicking EVApps - GUI - Share icon.png in the app sharing dialog box.
       

[ ADD PROPERTIES ]: Used to select the exposed properties to be passed as a parameter in the URL. Note: All app objects that have exposed properties will be displayed.
    Example documentation icon FR.png 

  • Search Value property linked to the Search > Search Field property of an EasyVista data source
  • View property linked to an Product name - ev itsm.png data source view
  • Filter property linked to an Product name - ev itsm.png data source filter
             EVApps - GUI - Exposed properties - Add.png

[ DELETE PROPERTIES ]: Used to delete the selected exposed properties from the list. They will no longer be passed as a parameter in the URL and will once again be available in the Add properties dialog box.

[ GENERATE URL ]: Used to generate the URL using all exposed properties displayed.

  • The & character is used to separate each exposed property.
  • The = character is used to separate the alias and its value.
    https://....easyvista.com/index.php?name=com.80003.57f7d989d68cc&param1=value1&param2=value2&param3=value3...


Apps - Drop-down list Pages.png: Used to list app pages

  • Select one to view it in the Design pane. 
  • To display the page properties, click Apps - Manage pages icon.png to select the page in the Objects pane.


EVApps - GUI - Share icon.png : Used to share the app by communicating its URL or by creating an export file. Note: To run the app using its URL, the user platform login information is required.
        EVApps - GUI - Share Apps.png

  • [ EXPORT ]: Used to export the app in a compressed file (.tar.gz format).
    • Click the link at the bottom of the dialog box to save the file.
    • You can also export an app in the App Gallery.
    • The exported app can then be imported in the App Gallery.
              Example documentation icon FR.png  Export from a test environment ==>  Import to a production environment
  • [ EXPOSED PROPERTIES ]: Used to access exposed properties.
    • You can also click Apps - Application properties icon.png to access them in the general properties of the app. Open url.png See the description.
    • To ensure that the QR Code remains valid at all times, it will not take these properties into account.
       

EVApps - GUI - Save icon.png : Used to save the app. The version is added to the version history. Open url.png See Version management.


EVApps - GUI - History icon.png: Used to manage the app version history. Open url.png See Version management.
         EVApps - GUI - History.png
 

  • Add Backup: Used to create a restore point. Enter a meaningful description that will identify the changes made for this version and click Apps - Plus icon.png.
  • Available Backups: List of versions available for the app. These can be restore points that were created manually (1), manual backups created via EVApps - GUI - Save icon.png (2) and automatic backups created when the graphic editor was opened (3). Open url.png See Version management.
    • EVApps - GUI - History icon.png: Used to restore a version by returning to an earlier version of the app.
    • Apps - Delete icon.png : Used to delete a version from the version history. Click [ DELETE ALL ] to delete all versions.


EVApps - GUI - Connector icon.png : Used to configure connectors defining the connection settings to data sources. 

  • Connectors defined in the app are available only for the app.
  • Connectors defined in the App Gallery are available for all apps.
     

EVApps - GUI - Conception mode icon.png and EVApps - GUI - Wysiwig mode icon.png: Used to select the display mode in the Design pane. Note: The current display mode is represented by a blue icon.

  • EVApps - GUI - Conception mode icon.png : Display in design mode, in order to use the layout toolbar for each row and each widget.
                     EVApps - GUI - Toolbar Object.png
  • EVApps - GUI - Wysiwig mode icon.png : Display in Wysiwyg mode, in order to hide the toolbar for each row and each widget.


Apps - GUI - Desktop view icon.png and Apps - GUI - Mobile view icon.png: Used to hide or show the widgets to be displayed on small devices. Note: The current display mode is represented by a blue icon.

  • Apps - GUI - Desktop view icon.png : Desktop mode, for viewing all widgets, except those displayed only on small devices. Widgets whose Hide on Small Devices property is checked will not be displayed.
  • Apps - GUI - Mobile view icon.png : Mobile mode, for viewing only widgets defined for small devices. Only widgets whose On Small Devices Only property is checked will be displayed.
     

EVApps - GUI - Target devices icon.png : Used to simulate the app display for a specific device (e.g. computer screen, smartphone, tablet or TV).
         EVApps - GUI - Target Devices.png

  • Click one of the categories to display the devices supported by the platform.
  • The Latest list displays the last devices used.
  • Select the device you want and click EVApps - GUI - Portrait orientation icon.png (Portrait orientation) or EVApps - GUI - Landscape orientation icon.png (Landscape orientation). The app will be run in a window resized to the selected screen resolution.
  • Close the window to return to the graphic editor.


EVApps - GUI - Execute icon.png : Used to run the app. Note: This will be displayed in a new tab in the Web browser.

AuthenticationZone

Apps - Authentication zone.png: User information zone. 

  • Apps - Logout icon.png: Used to exit the platform.
  • Click the photo or name: Used to access the user's personal information.
             EVApps - Gallery - User Profile.png
    • Name, Email: Name and email address of the logged-in user. To associate a photo, click Apps - Upload icon.png.
    • System Message: Language used to display error and system messages.
    • Customer: User account on the Product name - ev sas.png platform.
    • Current Password: Current password of the logged-in user. To modify it, enter the new password in the New field and confirm it in the Confirm new Password field.
       
    • [ MANAGE MY EXTERNAL ACCOUNTS ] (Note: Only if users can access services with OAuth 2.0 authentication using their own accounts): This enables logged-in users to manage their personal accounts for accessing services (third-party products) with OAuth 2.0 authentication. Note: You can define the services configured for connectors using the account defined in the connector.

          Example documentation icon EN.png  Connection to Tweeter:

      • Corporate tweets ==>  users automatically have access to corporate timelines using the account defined in the connector. This account does not appear in the list.
      • Personal tweets ==>  users must enter their own login information. The account appears in the list.

      EVApps - Gallery - User Profile - Manage external resources.png
      • Service: Name of the service.
      • Visibility: Used to indicate if authentication is only for the logged-in user (Private) or for all users with access to the service via an Product name - ev sas.png app (Public).
      • Account: Account associated with the service.
      • Apps - Delete icon.png : Used to delete the login information for the selected service.
        • Click [ REMOVE ALL ] to delete the login information for all services.
        • If this information is used by an Product name - ev sas.png app, a message will appear. If you confirm the deletion, users of the app must once again log in manually.

 

Objects pane

Pages
Apps - Manage pages icon.png Used to manage app pages.
  • In execute mode:
    • Pages are displayed in the same order as in the list.
    • Only pages whose box you have selected will be displayed.
    • The first page is the default page in which the app automatically opens.
Failed to execute the [include] macro
EVApps - GUI - Manage Pages.png
Widgets
Apps - Manage widgets icon.png Used to display the list of widgets defined in the app, grouped by category.
  • Widgets are identified by icons that display their type.
  • Click one of the widget names to view it in the Design pane and open the Properties Inspector.

Search fieldApps - Search icon.png: Used to filter widgets by name. Note: The search is also run on custom widgets.

Apps - Duplicate icon.png : Used to duplicate the selected widget.

  • The Properties Inspector will automatically open for the new widget.
  • In the list of widgets, it is displayed below the duplicated object. It has the same name followed by the word, (Copy).
  • In the Design pane, it is placed below the source widget. It can be moved just like the other widgets.

Apps - Delete icon.png: Used to delete the selected widget.

EVApps - GUI - Manage Widgets.png
Apps - Add widget icon.png Used to create a new widget using one of the widget types defined in the library.
  • Click Apps - Category close.png next to one of the categories to open it and display the associated widgets. Click and drag the widget you want to the Design pane. The Properties Inspector will automatically open.

Search fieldApps - Search icon.png: Used to filter the types of widgets by name. Note: The search is also run on custom widgets.

Apps - Help icon.png : Used to open the contextual help page for the widget type.

Apps - Types widgets.png
Data sources
Apps - Manage datasources icon.png Used to display the list of data sources defined in the app.
  • Data sources are identified by icons that display their type.
  • Click one of the data source names to open the Properties Inspector.
  • Data sources pointing to an alias appear in bold.

Search fieldApps - Search icon.png: Used to filter data sources by name.

Utilization counter icon.png : Counter indicating the number of times the data source is used in the app. Move the cursor over it to display the list of widgets.

Apps - Duplicate icon.png : Used to duplicate the selected data source. Note: Composite data sources cannot be duplicated.

  • The Properties Inspector will automatically open for the new data source.
  • In the list of data sources, it is displayed below the duplicated object. It has the same name followed by the word, (Copy).

Apps - Delete icon.png: Used to delete the selected data source.

EVApps - GUI - Manage Datasources.png
Apps - Add datasource icon.png Used to create a new data source using one of the data source types defined in the library.
  • Click Apps - Category close.png next to one of the categories to open it and display the associated data sources. Click the data source you want. The Properties Inspector will automatically open.

Apps - Help icon.png: Used to open the contextual help page for the data source library.

Search field Apps - Search icon.png: Used to filter the types of data sources by name.

Apps - Types datasources.png

 

Design pane

It defines the workspace which is divided into rows, each virtually separated into a maximum of 12 columns of equal width. The Design pane is automatically refreshed each time widget properties are modified.
         EVApps - widget Layout - Virtual Screen.png

  • The position of widgets can be created in each row using Layout category widgets.
  • Depending on the size of the device (e.g. computer screen, smartphone, tablet or TV), a widget can occupy all 12 columns (one whole row) or several widgets can be displayed in the same row.
  • You can see the outline of objects when you move the cursor over them:
    • Green dotted borders are used for objects in the row or column.
    • Green borders are used for objects.

Best Practice icon.png If the border of the zone does not appear correctly, you should reduce the zoom level of the browser.

Row Column Widget
EVApps - GUI - Toolbar Object Row.png EVApps - GUI - Toolbar Object Custom.png EVApps - GUI - Toolbar Object Widget.png
  • Each row, column and widget has a contextual menu which you can display by clicking Wheel icon.png when you move the cursor over the object bar.
                  Apps - GUI - Contextual menu.png
    • Apps - Duplicate 2 icon.png Create Custom Widget: Used to create a new custom widget using objects in the selected row or column.
    • Apps - Delete icon.png Delete Row / Apps - Delete icon.png Delete Column: Used to delete the selected row or column.
    • Apps - Duplicate icon.png Copy widget: Used to duplicate the selected widget.
      • The new widget is automatically created and its name, followed by the word, (Copy), will appear in the list of widgets.
                 Apps - Duplicate widget.png
      • In the Design pane, it is placed below the source widget. It can be moved just like the other widgets.
      • The duplicated object will open directly in edit mode.
         
    • Apps - Delete icon.png Remove widget: Used to delete the selected widget.
       
    • Apps - Stack on small icon.png Stack on Small (default display mode): This allows responsive Web design to manage the positioning of widgets based on the width of the device screen, e.g. PC, smartphone or tablet. : Widgets are automatically placed in a row. If the screen width is too small, they are stacked on top of each other.
       
    • Apps - Single row on small icon.png Single row on small: Used to force widgets to be placed in a single row and keep them together regardless of the width of the device screen.

      Stack on Small option   Apps - Stack on small icon.png Single row on small option   Apps - Single row on small icon.png

      Display on a PC

      Apps - GUI - Stack on small - Desktop.png

      Display on a PC

      Apps - GUI - Single row on small.png

      Display on a smartphone (Android or iPhone)

      Apps - GUI - Stack on small - Mobile.png

      Display on a smartphone (Android or iPhone)

      Apps - GUI - Single row on small.png

  • Move the cursor over selected objects to display the move handle Cursor move icon.png and drag them to a new position. Note: The positions available will appear in green with the words Drop Here.
             EVApps - GUI - Toolbar Object Move.png
  • Use EVApps - GUI - Move left icon.png and EVApps - GUI - Move right icon.png to modify the size of each column.
  • Use Apps - Plus icon.png to divide a column into two. The new column will be inserted to the right of the existing column.
  • To modify the height of an object, place the cursor over the bottom of the object and move EVApps - GUI - Dimension icon.png up or down to adjust the height.

Best Practice icon.png To apply the same height to a set of objects, enter the same value in Theme > Widget Height for each object.

                   EVApps - GUI - Toolbar Object Height.png

 

Properties Inspector

This allows you to configure each object used in the app, e.g. page, data source or widget

  • Properties are specific to each type of object.
  • The Design pane is automatically refreshed each time properties are modified.
     
Page Data source Widget
Access:
  • Click Apps - Manage pages icon.png in the Objects pane and then click Apps - Edit icon.png next to the page you want.
Access:
*Click Apps - Manage datasources icon.png in the Objects pane and then click Apps - Edit icon.png next to the data source you want.

or

  • In a widget linked to a data source, click Apps - Edit icon.png next to it.
Access:
  • Click the widget you want in the Design pane.

    or

  • Click Apps - Manage widgets icon.png in the Objects pane and then click the name of the widget you want.
EVApps - GUI - Inspector Properties Page.png EVApps - GUI - Inspector Properties Datasource.png EVApps - GUI - Inspector Properties Widget.png

Apps - Help icon.png : Used to open the contextual help page.

Apps - Duplicate 2 icon.png For a widget: Used to create a custom widget using the selected widget as a template.

Properties are grouped by category:

  • Content category: Fundamental properties required for the object to work.
  • Data category: Configuration properties for the data source used by the widget.
  • Chart and Chart Label -/- Legend categories: Properties related to the display of charts in the Dashboards widget (e.g. legend, labels or axis color).
  • Theme category: Graphic properties related to the widget or page (e.g. border, background color or font color). Note: Properties defined at higher levels are inherited by lower levels. You can modify each object in its specific context. Open url.png See the principles of inheritance.

You can use several tools in the widget properties:

  • Text editor: Apps - Edit icon.png For the Label, Header/Footer and HTML Code properties.
  • Color Picker: Apps - Color Picker icon Off.png For the Color property.
  • Icon gallery: Wheel icon.png For the Icon property. Also accessible from the text editor.

Procedure: How to use the graphic editor

1. In the App Gallery, click Apps - Application properties icon.png next to the app to open it in edit mode.

2. You can create pages to divide the app into sub-apps: 

  • Click Apps - Manage pages icon.png in the Objects pane and then click Apps - Add icon.png to add a new page.
  • If you want to make certain pages private:
    • Associate a Public user with the app. Open url.png See Public mode.
      • If required, define the Public user in Access Management. Tick the Public User Apps - Public user Profile.png box for the relevant user.
      • Click Apps - Application properties icon.png to display the general app properties and select the user in the Choose a public User field.
    • Click Apps - Manage pages icon.png to display the list of pages. Click Apps - Public page icon.png to make the page private or click Apps - Private page icon.png to make it public.

3. Define the position of the new widgets to be displayed in the current page.

Best Practice icon.png Create a restore point using EVApps - GUI - History icon.png before modifying the widget's properties and layout. This enables you to return to an earlier version if required. Open url.png See Version management.

  • Click Apps - Add widget icon.png in the Objects pane.
  • 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: When dragging the widget over a position, the position will appear in green with the words Drop Here.
             EVApps - GUI - Procedure 1.png

4. If required, create the data sources pointing to the new widgets by clicking Apps - Add datasource icon.png in the Objects pane.

5. Position and configure the widgets used for the current page:

  • Click Apps - Add widget icon.png in the Objects pane.
  • Click and drag the new type of widget to a position available in the Design pane.
     EVApps - GUI - Procedure 2.png ==> EVApps - GUI - Procedure 3.png
  • Specify the properties of the new widget in the Properties Inspector. Modifications will automatically be taken into account and displayed in the Design pane. Note: Mandatory properties are grouped in the Content category.

6. To modify a widget: 

  • Click the widget you want in the Design pane. Alternatively, in the Objects pane, click Apps - Manage widgets icon.png and then click the name of the widget you want.
  • To modify its height, specify the Theme > Widget Height property. Alternatively, in the Design pane, place the cursor at the bottom of the widget position and move the gray bar up or down to adjust its height.
     EVApps - GUI - Procedure 4.png          

7. To delete a widget:

  • Click Apps - Delete icon.png in the widget toolbar in the Design pane. Alternatively, in the Objects pane, click Apps - Manage widgets icon.png and then click Apps - Delete icon.png next to the widget you want.
             EVApps - GUI - Procedure 5.png

8. To move a widget:

  • In the Design pane, place the cursor above the widget you want to move. The cursor will appear as follows: Cursor move icon.png.
     EVApps - GUI - Procedure 6.png
  • Drag the object to the position you want.
     EVApps - GUI - Procedure 7.png ==> EVApps - GUI - Procedure 8.png

9. You can switch to Wysiwyg EVApps - GUI - Wysiwig mode icon.png mode to hide the object toolbars. Click EVApps - GUI - Conception mode icon.png to return to design mode.

10. Run the app to check its visual layout and that it is working correctly:

  • Click EVApps - GUI - Execute icon.png to run the app in a new tab in the Web browser.
  • Click EVApps - GUI - Target devices icon.png and select the device in which users will view the app. Select EVApps - GUI - Portrait orientation icon.png for Portrait orientation or EVApps - GUI - Landscape orientation icon.png for Landscape orientation.

11. Once the new app has been created, assign rights for running the app to the relevant users.

  • Click EVApps - GUI - Close Application icon.png to close the graphic editor. You will return to the App Gallery. Note: The app will automatically be saved.
  • Click Apps - User profile.png next to the app and specify access rights for each user.

Exposed properties

 

Examples

 Open url.png See the description of properties.

1. Display forms from the Product name - ev itsm.png employee directory.

  • By default, all records are displayed using a Data Viewer widget that points to an EasyVista data source.
  • To display only employees whose login contains the value, ALBERS, the exposed property of the data source, SearchValue, is passed as a parameter in the URL. Open url.png See the procedure.
             EVApps - GUI - Exposed properties - Example Employee directory.png

2. Redirect users to the details of a specific incident via an automatic email sent from Product name - ev itsm.png.

  • To select the incident, the exposed property of the EasyVista data source, SearchValue, is passed as a parameter in the URL. Open url.png See the procedure.

How to generate a direct link to Employee forms

 

Open url.png See the description of exposed properties.

Example documentation icon FR.png Generate a URL for accessing Employee forms whose login contains the value, ALBERS directly.

1. Create an EasyVista data source called Employee List.

2. Add a Data Viewer widget pointing to the EasyVista data source with the default display mode, Grid. All records in the data source will appear in List mode.
         EVApps - GUI - Exposed properties - Example - All.png

3. Select the exposed properties used to run the search on employee logins.

  • Click Apps - Application properties icon.png or EVApps - GUI - Share icon.png to open the Exposed properties dialog box.
  • Click [ ADD PROPERTIES ].
  • Select the Search Value property in the Employee List data source and click [ OK ].
             EVApps - GUI - Exposed properties - Example - Add properties.png

4. Define the value of the exposed property in order to display only Employee forms whose login contains the value, ALBERS.

  • Double-click the URL parameter alias cell and modify the name of the alias to LOGIN.
  • Double-click the Content/Value cell and enter the value you want to search for, ALBERS.
             EVApps - GUI - Exposed properties - Example - Define properties.png

5. Click [ GENERATE URL ] to generate the URL link.

6. To run the app, you can copy the link and paste it in your Web browser or you can click the Execute url application link.
         EVApps - GUI - Exposed properties - Example Employee directory.png

Tags:
Last modified by Philippe Franck on 2017/07/25 11:18
Created by Administrator XWiki on 2014/09/02 11:33

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

Quick Call
SCCM Distribution
Actions
Reporting Tools
Purge of archives

Powered by XWiki ©, EasyVista 2017