Service Apps - The Graphic Editor

Last modified on 2023/02/09 10:23

The graphic editor is the tool used for designing Service Apps apps. It is used to:

  • Access the following libraries:
    • The data source library providing the means of access to sources of data, e.g. databases, files, websites, third-party products. Certain data sources require the prior configuration of connectors.
    • The widget and custom widget library providing all graphic components for displaying data and for defining the visual aspect of the app.
  • Configure and define the behavior of objects in the Properties Inspector.
  • Test the app based on the device, e.g. smartphone, tablet, PC screen, etc.

Characteristics of apps

Each app can:

  • Be associated with a theme that defines its style guide.
  • Be divided into pages to group information.
  • Contain public pages, i.e. pages accessible to all users, and private pages, i.e. pages that contain data requiring user authentication. Open url.png See Public mode.
  • Be designed to run in responsive mode, where the display will automatically be adapted to the device on which the app is run, e.g. PC, smartphone or tablet. 
  • Be exported from a test environment in order to import it to the production environment. 

Notes

  • When an app displays Service Manager data:
    • Data is displayed in the language of the logged-in user.
    • Numerical values are restricted to the default domain of the logged-in user.
  • Widgets using dynamic data sources are automatically refreshed each time the graphic editor is opened and each time the page is redisplayed.
  • Deployment of apps:
    • To deploy an app, you send users a link to the app which can be a direct URL or a shortcut (recommended).
    • Parameters can be passed in the app URL in order to apply a filter or view, or to access specific records directly. Open url.png See Exposed properties.
  • The version management functionality allows you to switch to an earlier version of the app at any time.

Caution

  • Responsive mode cannot adapt to browser and screen resolution when users use the zoom functionality in an app. As the positioning of objects is fixed and defined in pixels and the display area remains unchanged, horizontal or vertical scroll bars may appear.
    • Service Apps templates are designed to be displayed correctly without any scroll bars up to a certain zoom level.
    • When creating a new app, you should anticipate the zoom level users may require on their screens and define widgets accordingly so as to eliminate the need for scroll bars.

Best Practice

  • Use the template library that provides a set of apps that are ready to use, downloadable and easily customizable.
  • Use themes to define the style guide of your apps.
  • Use CSS variables to modify your Service Apps style guide quickly. They enable you to automatically load graphic properties, such as color or font size, in the widgets used by all of your apps.
  • 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.
  • In execute mode, users can click EVApps - Execution - List Applications icon.png to access all of their apps. They will automatically be 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 EVApps - Execution - List Applications icon.png in the Show App List property in the general properties.

Version management

Version history

  • You can access this using EVApps - GUI - History icon.png in the toolbar. Open url.png See the description.
  • It contains the following:
    • Manually created restore points in the history. Limited in number.
    • Automatic backups performed each time the app is opened in the graphic editor. The backup file name contains the following text, Saved before editing by {Connected_User}.
    • Manual backups performed via EVApps - GUI - Save icon.png. Their names contain the following text, Saved by {Connected_User}.
  • The name of each backup will show the creation date and time.
  • Versions that have not been manually deleted are stored as long as the app is not deleted.
     

System backups

  • These are performed automatically by the system based on a specific frequency. 
  • They do not appear in the version history.
     

Rollback to an earlier version

  • You can rollback to an earlier version of the app at any time by selecting the version you want in the history.
  • 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.

Access

In the App Gallery, click Apps - Application properties icon.png in the app toolbar.

Description of the graphic editor

The screen is divided into four zones:

  • (1) Toolbar
  • (2) Objects pane, used to access all app objects, e.g. pages, widgets or data sources
  • (3) Properties Inspector, specific to each object
  • (4) Design pane, a workspace for defining the layout of widgets
          Apps - 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 properties of the app.

EVApps - GUI - Application Properties.png

  • Apps Icon tab: Used to upload the icon associated with the app in the App Gallery.
Tab Display in the App Gallery
Application Properties - Apps icon tab.png Application Properties - Apps icon tab - Gallery example.png
  • Click Apps - Upload icon.png to select the image.
  • To crop the filename
    • Move the cursor over the image and click Apps - Crop icon.png.
    • Click and drag to select the zone you want to keep.
    • 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 should display a title (Name option) or a logo (Logo option).
    • Name option: The title displayed is taken from the Display Name field.
    • Logo option: Click Apps - Upload icon.png to upload the logo.

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.

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


  • Favicon tab: Used to select the icon displayed in the tab bar of the Web browser or as a shortcut on the Desktop.
    • 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.
Tab Display
Application Properties - Favicon tab.png
  • Click Apps - Upload icon.png to select the image.
  • Click Apps - Remove uploaded file icon.png to delete all downloaded resolutions.
  • To select a different image for a given resolution:
    • Move the cursor over the resolution you want to modify.
    • Click Apps - 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 the resolution is different from the original one.

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

  • Display Name: Name of the app displayed in the title bar in execute mode.
  • Theme: Theme of the app that defines its style guide, e.g. background color, borders, fonts, etc.
    • Modifications are automatically reflected in the Design pane.
    • 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 used by the app.
    • 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 (Note: Only when the Show Main Toolbar property is enabled): In execute mode, this indicates whether the EVApps - Execution - List Applications icon.png icon (list of apps that users can access) is displayed (box is checked) or not (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
  • Choose a public User: User whose profile is Public associated with the app.
    • When a user is selected, you can define public pages, i.e. pages accessible to all users, and private pages, i.e. pages that contain data requiring user authentication. Open url.png See Public mode.
    • Click Apps - Delete icon.png to remove the Public user from the app and make it private.
  • Help Link: URL of the help page associated with the app.
    • Click Black Right arrow icon.png and specify the URL.
    • In execute mode, the ev sas - Help icon.png icon will appear in the app title bar.
  • Exposed Properties: Used to access exposed properties.   Open url.png See the description.
    • These are parameters that can be passed in the app URL in order to apply a filter or view, or to access specific records directly.
    • Note: The QR code does not take exposed properties into consideration. This enables it to be valid at all times.

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

  • Select one of them to view its contents 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 sharing its URL, QR code or 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).
    • A link will automatically be generated. Click the link 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 Export from a test environment ==> Import to a production environment
  • Exposed Properties: Used to access exposed properties. Open url.png See the description.
    • These are parameters that can be passed in the app URL in order to apply a filter or view, or to access specific records directly.
    • Note: The QR code does not take exposed properties into consideration. This enables it to be valid at all times.

EVApps - GUI - Save icon.png: Used to save the app.


EVApps - GUI - History icon.png: Used to open 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.
    • Next, click Apps - Plus icon.png.
  • Available Backups: List of versions available for the app.
    • (1) Restore points that were created manually.
    • (2) Manual backups created via EVApps - GUI - Save icon.png.
    • (3) Automatic backups created when the graphic editor is opened.
  • 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 access the connectors used by the app to configure the connection parameters to app data sources.

  • Note: You can also define connectors in the App Gallery. They will be available to all apps.
     

EVApps - GUI - Conception mode icon.png and EVApps - GUI - Wysiwig mode icon.png: In the Design pane, this enables you to toggle between a display in design mode and Wysiwyg mode. In design mode, toolbars are shown for each row and each widget. In Wysiwyg mode, all toolbars are hidden. Note: The current display mode is represented by a blue icon.

Display in design mode   EVApps - GUI - Conception mode icon.png Display in Wysiwyg mode   EVApps - GUI - Wysiwig mode icon.png
Apps - GUI - Conception mode.png Apps - GUI - Wysiwyg mode.png

EVApps - GUI - Responsive mode icon.png: Used to access responsive mode. This overrides the default properties of each widget based on the type of device on which the app is run, e.g. smartphone, tablet, PC screen, high definition PC screen, high-end flat-screen TV. Open url.png See the description.

  • The graphic editor will display a new toolbar.
  • Click Apps - Responsive mode - Back to GUI icon.png to return to the graphic editor in standard mode.
     

EVApps - GUI - Execute icon.png: Used to run the app in a new Web browser tab.

AuthenticationZone

Apps - Authentication zone.png: User information zone. 

  • Apps - Logout icon.png: Used to close the platform.
  • Click the photo or name: Used to open the user information zone.

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.
  • Language: Language used to display error and system messages.

Note: The properties below are inherited from the logged-in user's platform (in Windows, this is specified in the Control Panel > Regional and Language Options). You can, however, overwrite them.

  • Date format: Format applied to dates.
  • Time format: Format applied to time.
  • Thousands separator: Character used to group thousands.
  • Decimals separator: Character used to indicate the decimal symbol.

Manage my External Accounts: Used to logged-in users to manage their personal accounts for accessing services with OAuth 2.0 authentication.

Notes:

  • Only if users can access services with OAuth 2.0 authentication using their own accounts.
  • You can define the services configured for connectors using the account defined in the connector.
    example   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 (or third-party application).
  • 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 Service Apps 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 the deleted information is used in an app, users of the app must once again log in manually.

Objects pane

The Objects pane is used to manage app objects such as pages, data sources, and widgets.

Apps - Manage pages icon.png Pages: Used to access the list of pages in the app.

  • Click Apps - Edit icon.png to open the Properties Inspector (graphic properties of the page) and display the contents of the page in the Design pane.
  • List of tools
    • Apps - Add icon.png Create a new page.
    • Box checked.png Show or hide pages in execute mode.
    • Manage public Apps - Private page icon.png pages and private Apps - Public page icon.png pages. Open url.png See Public mode.
    • Wheel icon.png Delete and duplicate pages using the contextual menu.
    • Apps - Order objects icon.png Arrange the order of pages.
            EVApps - GUI - Manage Pages.png
       

Apps - Add widget icon.png Add Widgets: Used to create widgets for the selected page using the widget types defined in the library.
      Open url.png See How to add a widget to an app.

  • List of tools
    • Apps - Search icon.png Search and filter types of widgets and custom widgets by name.
    • ev sas - Help icon.png Open the contextual help page specific to the type of widget.
            Apps - Types widgets.png
       

Apps - Manage widgets icon.png Widgets: Used to access the list of widgets and custom widgets for the selected page, arranged by category.

  • Click the name of a widget to open the Properties Inspector and view its contents in the Design pane.
  • Widgets are identified by icons that display their type.
  • List of tools
    • Apps - Search icon.png Search and filter widgets and custom widgets by name.
    • Apps - Duplicate icon.png Duplicate widgets. New widgets are displayed in the Design pane below the widget used as a template.
    • Apps - Delete icon.png Delete widgets in the page.
            EVApps - GUI - Manage Widgets.png
       

Apps - Add datasource icon.png Add Data Sources: Used to create app data sources using one of the data source types defined in the library.

  • List of tools
    • ev sas - Help icon.png Open the help page specific to the data source library.
    • Apps - Search icon.png Search and filter types of data sources by name.
            Apps - Types datasources.png
       

Apps - Manage datasources icon.png Data Sources: Used to access the list of app data sources, arranged by category.

  • Click one of the data source names to open the Properties Inspector.
  • Data sources are identified by icons that display their type.
  • Data sources pointing to an alias appear in bold.
  • List of tools
    • Apps - Search icon.png Search and filter data sources by name.
    • Utilization counter icon.png View the number of times the data source is used in the app and display the list of widgets when the cursor is moved over the counter.
    • Apps - Duplicate icon.png Duplicate data sources. Note: Except for composite data sources.
    • Apps - Delete icon.png Delete data sources in the app.
            EVApps - GUI - Manage Datasources.png
       

Apps - Global Style icon.png Global Style: Used to access a single CSS style sheet for the entire app. Open url.png See the description

  • Click the section to display the field for specifying CSS code.
            Apps - GUI - Global Style.png

Design pane

The Design pane is a workspace used to define the layout of app widgets. The pane is automatically refreshed each time the properties of objects are modified, e.g. page, data source or widget.
      GUI - Design panel - Overview.png
 

  • The workspace is divided into rows, each virtually separated into a maximum of 12 columns of equal width.
        EVApps - widget Layout - Virtual Screen.png
  • You define the layout using Layout widgets.
  • Depending on the size of the device (e.g. PC 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.
     

Principles of use

  • You can view the layout of widgets 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
  • You can move each widget.
    • Move the cursor over the object to display Cursor move icon.png.
    • Click and drag the object to its new position. Note: The positions available will appear in green with the words Drop a Layout Widget Here.
            EVApps - GUI - Toolbar Object Move.png
       
  • You can modify the height of a widget.
    • Move the cursor over the bottom of the object and display EVApps - GUI - Dimension icon.png.
    • Click the object and move up or down to adjust the height.
            EVApps - GUI - Toolbar Object Height.png

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.

  • Each row, column and widget has a contextual menu for performing different actions.
    • Move the cursor over the object bar.
    • Click Wheel icon.png.
            GUI - Design panel - Contextual menu.png
       

Description of contextual menu options

  • Apps - Duplicate 2 icon.png Create Custom Widget: Used to create a new custom widget using objects in the selected row or column.
    Open url.png See the procedure.
  • Apps - Delete icon.png Delete Row / Apps - Delete icon.png Delete Column: Used to delete the selected row or column.
    • All widgets in the row or column will be deleted in the Design pane.
    • They will remain available in the widget library of the app.
       
  • Apps - Duplicate icon.png Copy widget: Used to duplicate the selected widget.
    • It will have the same name followed by the word, (Copy).
            Apps - Duplicate widget.png
    • The new widget will appear in the Design pane below the widget used as a template.
    • It will open directly in edit mode.
       
  • Apps - Delete icon.png Remove widget: Used to delete the selected widget in the Design pane.
    • The widget will remain available in the widget library of the app.
       
  • Apps - Stack on small icon.png Stack on Small (default display mode): Used to position widgets automatically based on the type of device, e.g. smartphone, tablet, PC screen, etc.
    • 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.
    • Widgets will be kept 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

Properties Inspector

The Properties Inspector is used to configure each object used in the app, e.g. page, data source or widget. The Design pane is automatically refreshed each time properties are modified.

  • Properties are specific to each type of object.
  • They 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.
       

example  Properties Inspector for a widget

         GUI - Inspector properties - Widget.png

Access based on the type of object

  • Page: Click Apps - Manage pages icon.png Pages in the Objects pane and click Apps - Edit icon.png next to the page.
     
  • Data source:
    • Click Apps - Manage datasources icon.png Data Sources in the Objects pane and select the name of the data source.
      or
    • In a widget linked to a date source: Click Apps - Edit icon.png next to the Content > Data Source field.
       
  • Widget:
    • Click the widget in the Design pane.
      or
    • Click Apps - Manage widgets icon.png Widgets in the Objects pane and select the name of the widget.
       

Tools accessible in the widget properties

  • Text editor: Apps - Edit Html 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 in the text editor.

Procedures

How to use the graphic editor

Step 1: Open the graphic editor.

1. Go to the App Gallery.

2. Click Apps - Application properties icon.png in the app toolbar.
  

Step 2: Add and configure the data sources in the app.

1. Define the connectors required for EasyVista, EasyVista KPI, MS SQL Server, and REST (Connector) data sources.

2. Click Apps - Add datasource icon.png Add Data Source in the Objects pane and select the type of data source.

Step 3: Add and configure widgets 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.

1. Define the layout of app objects using Layout widgets.

  • Click Apps - Add widget icon.png Add Widget 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: The positions available will appear in green with the words Drop a Layout Widget Here.
          GUI - Procedure - Add widget 1.png

2. Position and configure the widgets used in the current page.

  • Click Apps - Add widget icon.png Add Widget in the Objects pane.
  • Click and drag the type of widget or custom widget to one of the positions you defined earlier in the Design pane.
          GUI - Procedure - Add widget 2.png  ==>  GUI - Procedure - Add widget 3.png
  • Specify the properties of each widget in the Properties Inspector.
    Modifications will automatically be saved and displayed in the Design pane.

3. Used to add other app pages.

  • Click Apps - Add icon.png.

   or

  • Duplicate an existing page by clicking Wheel icon.png > Apps - Duplicate 2 icon.png Duplicate.

4. Add and configure all widgets in the new page.
 

Step 4: Create and configure the other app pages.

1. Click Apps - Manage pages icon.png Pages in the Objects pane and click Apps - Add icon.png.

Note: You can duplicate an existing page with all of its widgets already configured and correctly placed. To do this, click Wheel icon.png > Apps - Duplicate 2 icon.png Duplicate.

2. Add and configure all widgets in the new page.

Step 5: Define the layout of the app page.

1. Select the page you want from the drop-down list Apps - Drop-down list Pages.png.

Configuration in responsive mode

2. Display the properties of the widgets to be modified.

  • Click the widget in the Design pane.
    The Properties Inspector will automatically be refreshed.

   or

  • Click Apps - Manage widgets icon.png Widgets in the Objects pane and click the widget name.
    The Properties Inspector and the Design pane will automatically be refreshed.
     

Adjust the widget height

  • Specify the Theme > Widget Height property.

   or

  • Place the cursor at the bottom of the widget in the Design pane.
  • Move the gray bar up or down to adjust its height.
          GUI - Procedure - Change height.png
     

Move a widget

  • Place the cursor over the widget to be moved in the Design pane.
    The cursor will change to Cursor move icon.png.
          GUI - Procedure - Move widget 1.png
  • Drag the object to the position you want.
          GUI - Procedure - Move widget 2.png  ==> GUI - Procedure - Move widget 3.png

Delete a 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
     

Delete a column

Caution: All of the widgets in the column will be deleted.

  • Move the cursor over the column in the Design pane.
  • Click Wheel icon.png > Apps - Delete icon.png Delete Column.
           GUI - Procedure - Delete column.png
      

Step 6 (optional): Manage public and private app pages.

   Open url.png See Public mode.

1. Click Apps - Application properties icon.png > Choose a public User to associate a user whose profile is Public with the app.

2. Click Apps - Manage pages icon.png in the Objects pane.

3. Specify the type of access for each page.
 Note: The home page will always be a public page.

  • Click Apps - Public page icon.png to make a page private.
  • Click Apps - Private page icon.png to make a page public.

The modifications will automatically be saved.
 

Step 7: Test the app.

1. Click EVApps - GUI - Execute icon.png to run the app.

The app will appear in a new Web browser tab.

2. Check the visual layout of objects and the workability of the app.
 

Preview in Wysiwyg mode in the Design pane

  • Click EVApps - GUI - Wysiwig mode icon.png to switch to Wysiwyg mode.
    All object toolbars will be hidden.
  • Click EVApps - GUI - Conception mode icon.png to return to design mode.

How to create an app

        Open url.png See Best practices for creating apps.

Step 1: Create a new app

You can create an app using one of the three following methods.


Step 1.a: Create the app using a template from the library.

From : Service Apps versions Autumn 2020 and later

        Open url.png See the list of templates.

1. Click Apps - Gallery - Create Shortcut icon.png Create App in the App Gallery toolbar.

The template library will appear.
      Template Library.png

2. Select the template you want.

The description of the template, its last modification date and latest version date will appear in the right pane.

3. Import reports attached to the template to Service Manager.

  • Click Reports.
    The appropriate template wiki page will be opened.
  • Download the batch of reports.
  • Import the files to Service Manager by selecting Administration > Import/Export > Import in the menu.

Note: Parent queries are not exported with the reports. This means that the items you update will not be overwritten when reports are imported.

4. Return to Service Apps.

5. Click Create This App.

  • A new app will automatically be created using the template.
  • It will appear in the Design pane of the graphic editor.
  • All of the objects in the app will be initialized.


Step 1.b: Create the new app using an app with no content.

1. Click Apps - Gallery - Create Shortcut icon.png Create App in the App Gallery toolbar.

The template library will appear.

2. Click Apps - Add icon.png.

The general properties of the app will appear.

3. Specify the information.

4. Click OK.

The graphic editor will appear.

5. Use the editor to create, place and define all app objects.

     Open url.png See the procedure.


Step 1.c: Create the new app using an existing app.

Note: Only for users with the App Creator profile.

1. Click Apps - Duplicate icon.png in the toolbar of the app you want to duplicate.

  • A new app will be created. It will have the same name followed by the word, (Copy).
  • All of the objects in the template app will be duplicated.

2. (optional) Click Apps - Gallery - Edit properties icon.png to rename the new app.

3. Use the editor to create, place and define all app objects.

     Open url.png See the procedure.
 

Step 2: Test the app.

1. Click EVApps - GUI - Execute icon.png.

The app will appear in a new Web browser tab.

2. Check the visual layout of objects and the workability of the app.
 

Step 3: Define access rights to the app.

1. Click EVApps - GUI - Close Application icon.png to return to the App Gallery.

Note: The app will automatically be saved.

2. Click Apps - Rights - Administer icon.png in the app toolbar.

3. Assign access rights to the relevant users or teams.

  • Select the relevant users or teams.
    Note: If you select a team, the access rights you define will apply to all of the users in the team.
  • Select the access rights to assign.
    UserApplicationsRights
    • Apps - Rights - Administer icon.png Admin: Users are authorized to administer the app but cannot modify or run it.
    • Apps - Rights - Edit icon.png Edit: Users are authorized to access the graphic editor to edit the app.
    • Apps - Rights - Execute icon.png Execute: Users are authorized to run the app but cannot modify it.
  • Click OK.
     

Step 4: Send the new app to users.

Note: Only for users with the App Center Manager profile.

1. Create a shortcut to the new app by clicking Apps - Gallery - Create Shortcut icon.png Create Shortcut in the App Gallery toolbar.

The shortcut will appear at the top of the App Gallery with the Apps - Shortcut icon.png icon.

2. Click Apps - Gallery - Edit application icon.png in the shortcut toolbar.

3. Copy the QR code or link displayed in Share application URL.

Tags:
Powered by XWiki © EasyVista 2022