The Graphic Editor of Apps


Apps - GUI overview.png

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

  • Select app objects from two libraries:
    • Data source library: All means of access to data sources, e.g. databases, files, websites, third-party products. You connect to the data source using connectors.
    • Widget and custom widget library: All graphic components for displaying data and for defining the visual aspect of the app.
  • Build the app by placing objects in a workspace called the Design pane.
  • Configure and define the behavior of objects in the Properties Inspector.
  • Test the app based on the device size, e.g. smartphone, tablet, PC screen, etc.
     

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 screen, smartphone or tablet.
     

Other functionalities

  • 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.

Notes

  • Widgets using dynamic data sources are automatically refreshed each time the graphic editor is opened and each time the page is redisplayed.

Version management

Version history

  • Click EVApps - GUI - History icon.png in the toolbar to access the version history.
  • It contains:
    • Restore points that were manually created in the version history (Add Backup field). These are limited in number.
    • Automatic backups performed each time the app is opened in the graphic editor. Their names will contain the following words: Saved before editing by {Connected_User}.
    • Manual backups performed via EVApps - GUI - Save icon.png. Their names will contain the following words: 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.
     

Return to an earlier version of the app

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

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.
  • 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 in the Show App List property. Open url.png See general properties.

Description of the graphic editor

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

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

See the description of properties.

  • 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 - Apps header 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 documentation icon EN.png  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.
     

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

  • Apps - GUI - Desktop view icon.png : Desktop mode: All widgets will be displayed, except those displayed only on small devices, i.e. widgets whose Hide on Small Devices property is disabled.
  • Apps - GUI - Mobile view icon.png : Mobile mode: Only widgets defined for small devices will be displayed, i.e. widgets whose On Small Devices Only property is enabled.
     

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

See the description of properties.

Name, Email: Name and email address of the logged-in user. To associate a photo, click Apps - Upload icon.png.

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.

System Message: Language used to display error and system messages.

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 (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 with OAuth 2.0 authentication.

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 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 the deleted information is used in an app, users of the app must once again log in manually.

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.

 

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.
  • The tools available enable you to:
    • 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.

  • The tools available enable you to:
    • 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.
  • The tools available enable you to:
    • 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.

  • The tools available enable you to:
    • 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.
  • The tools available enable you to:
    • 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

 

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 documentation icon EN.png  Properties Inspector for widgets
         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. Click Apps - Add datasource icon.png Add Data Source in the Objects pane.

2. Select the type of data source.

3. Rename the data source.

4. Specify its properties in the Properties Inspector.
The modifications will automatically be saved.

5. Repeat the procedure for all data sources in the app.
 

Step 3: Add and configure the widgets in the app.

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: Define the layout of the app page.

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

2. Select the widget you want to modify.

  • Click the widget in the Design pane.

   or

  • Click Apps - Manage widgets icon.png Widgets in the Objects pane.
  • Select the name of the widget.

3. Modify its properties in the Properties Inspector.
The Design pane will automatically be refreshed.

4. Adjust the height of the widget.

  • 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
     

5. Move the widget on the page.

  • 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 5 (optional): Manage public and private pages in the app.

   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.
The list of existing app pages will appear.

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 5: Test the app.

# 1. Select the type of device on which you want to test the app.

  • Apps - GUI - Desktop view icon.png : Display on a PC
  • Apps - GUI - Mobile view icon.png: Display on a smartphone
     

2. Click EVApps - GUI - Execute icon.png to run the app.
The app will appear in a new Web browser tab.

3. 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 Practice icon.png App creation rules.

Step 1: Create a new app.

1. Select the method for creating the new app:

  • You can create a new app.
    • Click Apps - Gallery - Create Shortcut icon.png Create App in the App Gallery toolbar.
    • Specify the general properties of the app.
    • Click OK.
      The graphic editor will appear.
  • You can use an existing app as a template (Note: Only for users with the App Creator profile).
    • Click Apps - Duplicate icon.png in the toolbar of the app used as a template.
      • The graphic editor will appear.
      • All of the objects in the template app will be duplicated.
    • (optional) Click Apps - Application properties icon.png to rename the new app.

2. Use the graphic editor to create, position and define all app objects. Open url.png See the procedure.

     (optional based on the contents of the app)

   Open url.png See:

  • Data source library: All means of access to data sources, e.g. databases, files, websites, third-party products.
  • Widget and custom widget library: All graphic components for displaying data and for defining the visual aspect of the app.

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.

1. Create a shortcut to the new app by clicking Apps - Gallery - Create Shortcut icon.png Create Shortcut in the App Gallery toolbar.
Note: Users must have the App Center Manager profile.
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.

4. Send the link to the relevant users.

Tags:
Last modified by Philippe Franck on 2019/04/02 15:40
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

How to Automate Integration
Add a Shortcut to an App
History
Quick Dashboard
Full text search - Stop Words

Powered by XWiki ©, EasyVista 2019