The Responsive Mode of Apps


Service Manager version: Oxygen and later

Apps designed to run in responsive mode are apps whose contents will automatically adapt to the size of the device on which they are run, e.g. smartphones, tablets, PCs, etc. Instead of designing one app for each type of device thereby entailing significant creation and maintenance costs, responsive web design is used to create a unique automatically adaptable interface that does not require any duplication.

In Service Apps, responsive mode is used to manage five types of devices: S = Smartphone, M = Tablet, L = PC screen, XL = High definition PC screen, XXL = High-end flat-screen TV.

  • The app is created in the graphic editor for mode L = PC screen.
  • The other modes (S, M, XL, XXL) will automatically inherit the properties of mode L. Open url.png See the principles of inheritance and context-specific properties.
  • You can configure each mode individually in responsive mode in the graphic editor:
    • You can override the default properties of each widget.
    • You can show or hide each widget.

Principles of inheritance and context-specific properties

  • You can manage each of the widget's properties individually. 
  • By default, modes S, M, XL, and XXL will inherit the properties of mode L. Any modifications made to a widget in another mode will be context-specific and will replace the default properties.
  • Properties are inherited in a hierarchy with mode L at its highest level.
    • Default properties in mode L apply to all modes unless context-specific properties are defined in one of the other modes.
    • A property defined in mode M also applies to mode S unless it is specifically modified in mode S.
    • A property defined in mode XL also applies to mode XXL unless it is specifically modified in mode XXL.

                   Apps - Responsive mode - Inherit principle.png

Example

  • Standard graphic editor ==>  You create the Incident Dashboards app for a device in mode L (PC screen)
    • Footer: Displayed
    • Color palette of graphics: Default 
  • The other types of devices (S, M, XL, XXL) will inherit these two properties.
  • Switch to responsive mode in the graphic editor ==> Modification of specific properties in certain types of devices
    • Footer: Hidden for mode M (tablet). This means that mode S will automatically inherit this property and as such, its footer will be hidden. However for modes XL and XXL, the footer will remain displayed.
    • Color palette of graphics in mode XXL (high-end flat-screen TV): Green. The other modes S, M, and XL will keep the Default value.

Notes

  • You cannot move, resize or delete widgets. These operations can only be performed in the standard graphic editor for mode L.

Characteristics specific to versions 2016 and earlier

  • Responsive mode is managed for each widget using two properties, Hide on Small Devices and On Small Devices Only (Theme > General properties). Open url.png See the description.
  • In the standard toolbar of the graphic editor, click Apps - GUI - Desktop view icon.png and Apps - GUI - Mobile view icon.png to hide or show the widgets to be displayed on small devices.

Description of the graphic editor in responsive mode

Access: In the graphic editor, click EVApps - GUI - Responsive mode icon.png in the toolbar.

The screen is divided into four zones:

Toolbar

        Apps - Responsive mode - Toolbar.png

Apps - Responsive mode - Back to GUI icon.png: Used to close the graphic editor in responsive mode and return to the standard graphic editor.

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 - Save icon.png : Used to save the app. The version will be added to the history. Open url.png  See Version management.

Apps - Responsive mode - Drop-down list Devices by mode.png: List of devices available for each of the modes.
         Apps - Responsive mode - Devices by mode.png

  • Click Apps - Responsive mode - Device types bar.png to filter the devices by mode.
  • Click All to display all devices supported by all of the modes.
  • The icons displayed next to each device indicate the different configurations available.
             example   Apps - Responsive mode - Example - Device configurations.png

    For the MacBook Pro 2016 13'' device, there are two configurations:

    • XL configuration in Portrait orientation
    • M configuration in Landscape orientation
     

Apps - Responsive mode - Pixels resolution.png (Note: Only for a Generic device): Used to modify the resolution in pixels of the page shown in the Design pane.


Apps - Responsive mode - Switch portrait landscape icon.png : Used to toggle between the Portrait and Landscape orientations.

Portrait orientation   Apps - Responsive mode - Portrait icon.png Landscape orientation   Apps - Responsive mode - Landscape icon.png
Apps - Responsive mode - Portrait display.png Apps - Responsive mode - Landscape display.png


Apps - Responsive mode - Minimize maximize display icon.png : Used to toggle between standard display and Page mode. Standard display provides scrollbars to display the hidden contents of the page. Page mode makes an automatic adjustment to display all of the contents of the page in the Design pane.

Standard display   Apps - Responsive mode - Minimize display icon.png Page mode   Apps - Responsive mode - Maximize display icon.png
Apps - Responsive mode - Minimize display mode.png Apps - Responsive mode - Maximize display mode.png

Apps - Responsive mode - Objects list icon.png : Used to open the window for configuring widget visibility in the app for each type of device.

  • Click Open eye icon.png to hide the widget or click Close eye icon.png to show it for each type of device.
  • Click Apps - Responsive mode - Device types bar.png to filter the shown or hidden widgets by mode.
             Apps - Responsive mode - Objects list.png
     

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

In responsive mode, the Objects pane is used only to access widgets in the app.

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

Apps - Manage widgets icon.png Widgets: Used to access the list of widgets and custom widgets in the selected page.

 

Properties Inspector

In responsive mode, the Properties Inspector is used to configure each widget used by the app for a given type of device. The Design pane is automatically refreshed each time properties are modified.

Tools specific to responsive mode

  • Apps - Responsive mode - Inherit principle - Behavior by mode icon.png: When the cursor hovers over the icon, this displays the property value for each type of device based on the principles of inheritance.
             Apps - Responsive mode - Inherit value - Example.png
    • (1) Top of the L infotip: Configured mode and property value
    • (2) Bottom of the L infotip: Modes that inherit the value of the configured mode
               Apps - Responsive mode - Inherit value.png

example  Color of the graphic widget

  • Default in standard mode L: inherited by modes XL and XXL
  • Green modified for mode M and inherited by mode S
  • Apps - Responsive mode - Inherit principle - Return to standard value icon.png (Note: Only when the property is specifically defined for a mode): Used to return to standard mode L.

example   Return to the standard color of the graphic widget
         Apps - Responsive mode - Clear specific value.png

 

Design pane

In responsive mode, the Design pane is used only to view widgets for the selected type of device. 

You cannot move, resize or delete objects.

Procedure: How to use responsive mode

Step 1: Open the graphic editor in responsive mode.

Access: Go to the App Gallery.

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

2. Click EVApps - GUI - Responsive mode icon.png.
The graphic editor will appear in responsive mode The toolbar is different.
        Apps - Responsive mode - Toolbar.png
 

Step 2: Select the type of device.

1. Open the list of devices Apps - Responsive mode - Drop-down list Devices by mode.png.
         Apps - Responsive mode - Select device.png

2. Click Apps - Responsive mode - Device types bar.png to select the type of device.
All devices defined for the selected mode will appear.

3. Click the device you want to configure.

or

Select Generic if you cannot find the device you want in the list.

Step 3: Select the widget to be specifically modified.

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

2. Click Apps - Manage widgets icon.png Widgets in the Objects pane.
The Objects pane  will display all widgets in the app.

3. Click the name of the widget you want to configure.
The Properties Inspector will display information on the selected widget.
 

Step 4: Make the widget-specific modifications for the selected type of device.

1. Move the cursor over the icon Apps - Responsive mode - Inherit principle - Behavior by mode icon.png found to the right of the property you want to configure to check its current value.
The values for each mode will appear based on the principles of inheritance.
         Apps - Responsive mode - Procedure - Inherit standard value.png

2. Specify the value for the selected type of device.
The Design pane  will be refreshed.

3. Repeat the same procedure for each property to be modified for the type of device.

Return to the value of standard mode L

  • Click Apps - Responsive mode - Inherit principle - Return to standard value icon.png next to the property.
             Apps - Responsive mode - Procedure - Return to standard value.png
     

Step 5: Configure the visibility of widgets for each type of device.

1. Click Apps - Responsive mode - Objects list icon.png.
The list of all widgets in the app will appear.
         Apps - Responsive mode - Procedure - Objects list.png

2. Click Open eye icon.png to hide a widget for a given type of device.
Close eye icon.png will replace the previous icon.

3. Click Close eye icon.png to show a widget for a given type of device.
Open eye icon.png will replace the previous icon.

4. Click OK.
The Design pane will be refreshed. The widgets will be hidden or shown for the selected type of device.
 

Step 6 (optional): Narrow down the preview in the Design pane.

1. Click Apps - Responsive mode - Switch portrait landscape icon.png to switch between the Portrait and Landscape orientations. Open url.png See the example.

2. If you selected a Generic device, define its resolution in pixels in Apps - Responsive mode - Pixels resolution.png.

3. Click Apps - Responsive mode - Minimize maximize display icon.png to switch between standard display and Page mode. Standard display provides scrollbars to display the hidden contents of the page. Page mode makes an automatic adjustment to display all of the contents of the page in the Design pane. Open url.png See the example.
 

Step 7: Return to the graphic editor in standard mode.

1. Click Apps - Responsive mode - Back to GUI icon.png.

  • All widgets will be displayed again for standard mode L.
  • The toolbar is different.
            EVApps - GUI - Toolbar.png
Tags:
Last modified by Christine Daussac on 2020/04/08 11:55
Created by Administrator XWiki on 2019/04/01 20:04

Shortcuts

Powered by XWiki ©, EasyVista 2020