Creating and customizing application views by using Shell

You can design a configurable view for applications. A view is an outer container of an application and acts as an entry point for users to access the application on the Web. To design a view, you use the Application shell, which is a built-in landing page and default menu system that is configured for every application.  

Application shell enables you to: 

  • Design the application UI without requiring coding skills
    Create header and navigation by using inbuilt navigation and framework services from the Application shell
  • Enable navigation between views in an application 
    You can toggle between the views created by using BMC Helix Innovation Studio and the contents available in the current web application in the form of HTML, JavaScript, and CSS code.
  • Customize the list of navigational links and the list of actions
  • Control user access by assigning permissions to Shell menu items

Related topics

Creating-configurations-for-your-Digital-Service-application

For every application, the shell navigation is generated by the application archetype and is available for an application in the BMC Helix Innovation Studio.  

The following image shows the Shell editor for the Task Manager application:

Application shell.png

The following image shows the application view when users access the Task Manager application:

Task Manager_deployed app.PNG

To access the Shell editor for applications

  1. Log in to BMC Helix Innovation Studio and navigate to the Workspace tab.
  2. Select the application that you want to modify.
    The application details are displayed.
  3. From the application, click Navigation.The BMC Modern Shell Designer is displayed.

Process for designing an application view in Shell

You can design the application’s view in BMC Modern Shell by configuring the following items:

Action

Description

Example

Add navigation components to the header

Provides navigation options for the end-users.  

For more information, see Adding-navigation-components-to-header

The following image shows the View in Shell editor:

22_1_View in shell editor.png

The following image shows the View in the deployed application:

22_1_View in deployed app.png

Assign permissions to menu components

Enables you to control access to Shell menu items of view components by assigning appropriate permissions to them in BMC Modern Shell.

For more information, see Controlling-user-access-by-assigning-permissions-to-menu-elements.

If you assign permissions to the Administrator group for a Shell menu element, only those users belonging to the Administrator group, such as IT Helpdesk Administrators, can see and access the Administration menu group. Users who are not a part of the Administrator group, such as IT helpdesk agents, cannot access the Administration menu group. See the following image:

22_1_permissions-view component_authorized access.PNG

Enable switching between applications

Enables the end users to toggle between multiple applications.

For more information, see Launching-application-views-and-viewing-notifications.

 The following image shows how you can switch between applications:

22_1App switch.png

Enable and customize global search

Implements search for the end-users of your application. Global search provides default and customized search options.

For more information, see Enabling-global-search-for-use-in-an-application.

 The following image shows a sample search result with default configuration:

22_1_Search result with default config.png

View and customize the user profile

Provides information about the user and the application settings for that user. You can customize this component by adding additional menu items to it. For example, you can add a link to the user's profile.

For information about how to customize the user menu, see To customize the user menu.

The following image shows from where you can access your profile:

 22_1_View user profile.png

Track notifications

Tracks notifications created by the application, so that users are aware and can take necessary actions.

For more information, see Launching-application-views-and-viewing-notifications.

The following image shows a sample notification: 
22_1_View all notifications.png


 

Tip: For faster searching, add an asterisk to the end of your partial query. Example: cert*