Tutorial - UI view and permissions - UI Framework Developer Guide

Search…
Tutorial - UI view and permissions
This is not a replacement for security because it does not prevent users from executing certain server commands. 
UI Framework allows you to control the UI view and permissions for different users. This means we can limit certain users interaction and extend permissions to others. For example, we can allow certain users to view certain tables in the browser while other users cannot. 
The tutorial guide covers two main topics:
UiSdlConditionalRenderer: allows different components to display based on the user's conditions.
Admin groups and roles: defines users' conditions and permissions. 
Step 1 - Create the UiSdlConditionalRenderer
The UiSdlConditionalRenderer used to render either one of two components based on user's condition at runtime. Run c3ShowType(UiSdlConditionalRenderer) to find more information about UiSdlConditionalRenderer.
This is not an authorization feature. If you need to limit access to APIs, please use Permission and AdminGroup.
Under ui/c3/meta, create a conditionalRender JSON file. In this conditional render, if a user is apart of the SDLDemoDeveloper admin group, then exampleUI.SDLdemospecificTable is displayed for the user. If they are not apart of the SDLDemoDeveloper admin group, the UI displays exampleUI.prefilledForm. 
1
{
2
    "type": "UiSdlConditionalRenderer",
3
    "condition": {
4
          "type": "UiSdlPermissionRenderCondition",
5
          "adminGroup":
6
            {
7
                "id": "SDLDemoDeveloper"
8
            }
9
        },
10
    "thenComponent": {
11
      "id": "exampleUI.SDLdemospecificTable"
12
    },
13
    "elseComponent": {
14
      "id": "exampleUI.prefilledForm"
15
      
16
    }
17
}
Copied!
Step 2 - Create Admin Group
PageGroup is no longer supported in the newest UI framework. 
Based on if the user is apart of the admin group or not, the UI renders different components. 
Under the seed folder, createAdminGroup folder. It must be named AdminGroup. Inside the AdminGroup folder, create a JSON file in order to create the SDLDemoDeveloperAdminGroup.
SDLDemoDeveloper JSON file:
1
{
2
    "id" : "SDLDemoDeveloper",
3
    "name" : "SDLDemoDeveloper",
4
    "roles" : [
5
      {
6
        "id" : "SDLDemoUserRole"
7
      }
8
    ]
9
}
Copied!
The SDLDemoDeveloper admin group has a SDLDemoUserRole. We must create this file because this is where we are going to give certain permissions to users in the admin group. 
Users w/ limited access to C3 (ie non-developer users) are required to be in C3.Group.UiSdlAccess in order to access the UI.
Step 3 - Create the role
A role is a collection of Permissions and optionally ActionConditions. The permissions hold all the API calls this user can make. The structure of allowing or giving permission for the user to call an API is in this format: "allow:<Type>:<action name or method name>"
Under the seed folder, create a Role folder. It must be named Role. Inside the Role folder, create a JSON file in order to create the permissions the role will have.
You may have different permissions than the SDLDemoUser. 
SDLDemoUser JSON file:
1
{
2
    "id" : "SDLDemoUserRole",
3
    "name" : "SDLDemo User Role",
4
    "description" : "Provides access to SDLDemo APIs",
5
    "permissions" : [
6
      "allow:TestMetricEvaluatable::evalMetrics",
7
      "allow:TestMetricEvaluatable::evalMetrics",
8
      "allow:NormTimeseriesDouble::*",
9
      "allow:SDLDemoMachine::fetch",
10
      "allow:SDLDemoMachine::get",
11
      "allow:SDLDemoMachine::findMachineByName",
12
      "allow:SDLDemoCountry::fetch",
13
      "allow:SDLDemoType::fetch",
14
      "allow:SDLDemoInventory::fetch",
15
      "allow:SDLDemoShipment::fetch",
16
      "allow:SDLDemoUser::fetch",
17
      "allow:SDLDemoModel::fetch",
18
      "allow:SDLDemoPart::fetch",
19
      "allow:SDLDemoRegion::fetch",
20
      "allow:SDLDemoUser::get",
21
      "allow:SDLDemoUser::merge",
22
      "allow:SDLDemoPackage::fetch",
23
      "allow:SDLDemoEquipment::fetch",      
24
      "allow:User::fetch",
25
      "allow:SDLTestType::fetch",
26
      "allow:Hierarchy::*",
27
      "allow:SDLDemoLocation::fetch",
28
      "allow:GridEntity::fetch",
29
      "allow:UiSdlConfig::configValue",
30
      "allow:UiSdlUserPreference::configValue",
31
      "allow:UiSdlUserPreference::getConfig",
32
      "allow:UiSdlDensityTemplate:read:",
33
      "allow:UiSdlStyle::getStyleValues",
34
      "allow:UiSdlThemeTemplate:read:"
35
    ]
36
  }
Copied!
Step 4 - Create a new user
Create a new user in order to test that conditional renderer and admin group was made properly by adding the user to the admin group. 
IdentityManager type used to for User administration function.
1
//add a new user
2
IdentityManager.createUser("email","firstname","lastname","username")
3
​
4
//set the password using 
5
IdentityManager.setPassword("username","password")
6
​
7
//add a user to a group 
8
IdentityManager.addUserToGroup("username","groupname") 
9
​
10
//remove a user from a group 
11
IdentityManager.removeUserFromGroup("username","groupname")
Copied!
See available Admin Group and Roles
For more information on Admin groups and roles, go AdminGroup or Managing Access on the developer portal. 
Static console commands:
Run c3Grid(AdminGroup.fetch()) to see all of your AdminGroup.
Run c3Grid(Role.fetch()) to see all of your Role. 
Tutorial - Create your mini app - Previous
Tutorial - Translate your application
Last modified 2mo ago
Export as PDF
Copy link
Contents
Step 1 - Create the UiSdlConditionalRenderer
Step 2 - Create Admin Group
Step 3 - Create the role
Step 4 - Create a new user
See available Admin Group and Roles