Case 1 -- Extend a new management page via iFrame

The iPortal back-end management module supports adding a specified HTML page to the management menu via iFrame. The customized effect is as follows. In the following figure, a new management item named "iFrame Embedded Page" is added.

The process of extending the management menu via iFrame is as follows:

Step 1: Coding the js file of the extension development page as follows:

function GenerateRoutes(UserAddVue) {

  const route = [

    {

      path: '/user-add-page-children1',

      name: 'UserAddPage',

      component: UserAddVue,

      meta: { icon: 'select', title: 'iFrame Embedded Page', keepAlive: true, src: 'https://iportal.supermap.io/iportal' ,permission: ['portal:custom:extendsPage:viewPage1']}

    }

  ];

  return route;

}

let addByUrl = {

  GenerateRoutes: GenerateRoutes

};

window.addByUrl = addByUrl;

The GenerateRoutes in the above code is the routing function, which is described as follows:

• path: The path for accessing the extended page, i.e., the path behind the http(s)://<server>:<port>/iportal/admin-ui.
• name: The name of the route, which is unique. If there are multiple objects in route, the name of each object must be set to a different value.
• component: The name of the component for carrying the iFrame; must be consistent with the parameters passed by the GenerateRoutes function.
• meta: The meta info of the extension item, including:
• icon. Click here to view the supported icons.
• title：The tile of the extension item.
• keepAlive: Whether to use cache.
• src: The url of the extended external page.
• permission：The array of permission expressions for accessing the extended page; multiple permission expressions should be separated by commas. Only users with any permission in the array can access the extended page. If no value is set to this parameter, anyone with any administrative permissions can access the configured extended page. Supports setting as iPortal preset permissions or custom permissions. For the default preset permissions of iPortal, please refer to REST API: the modulePermissions field returned in userProfile; to customize new permissions, the format should be: portal:admin:extendsPage:{permission}, where the bold part can be named arbitrarily.

• children: To add a sub-menu under the current route item, you need to use the children field. The parameters of children are the same as those of the route.

For more information about the routing function, please refer to: Vue Router.

Step 2: Find the index.json file in the %SuperMap iPortal_HOME%\webapps\iportal\resources\admin-ui\extend directory (if there is no such file, create one with the same name) and write the contents as follows:

{

    "routerName": "GenerateRoutes",

    "libraryName": "addByUrl",

    "addDependsToVue": "",

    "jsUrl": [

        "/iportal/resources/admin-ui/extend/addByUrl.js"

    ]

}

• routerName: The extended route; the value can be an array or a function. An array means the route array of the extended pages; a function means to generate the route array according to the specified route function.
• libraryName: The name of the exteneded page bound to the current window.
• addDependsToVue (optional): If you use some libraries not supported by iPortal, you can use this method to bind.
• jsUrl: The path of the user extended js file to be loaded. The value is the path of the js file relative to the iPortal root path (form like: http(s)://<server>:<port>).

Step 3 (Optional): Edit the permissions.json in the %SuperMap iPortal_HOME%\webapps\iportal\resources\admin-ui\extend directory, write the custom permission expressions in the first step in json format. The permissions list of Roles Management can automatically add the custom permissions set in the permission.json file. Both Chinese and English are supported. The example is as follows:

{

    "permissions":[

      {

        "permission": "portal:custom:admin:extendsPage:viewPage1",

        "label": {

          "zh": "查看iframe扩展示例页面",

          "en": "View iframe extended page"

        }

      }

    ]

}

• permissions：permissions array
• permission：a single permission name, which should be the same as the custom permission expression set in the first step
• label：The permission description displayed in the permissions list of the Roles Management interface. zh is for the Chinese description; en is for the English description.

When complete, save the files. Log in iPortal as an administrator, you can see the extended content in the menu of the management page.

Note:

1）If garbed characters occur, please change the encoding format of the file to UTF-8.

2）If an HTTP 404 problem occurs when refreshed the newly extended management page, you need to add the following configuration in the urlrewrite.xml file in the %SuperMap iPortal_HOME%\webapps\iportal\WEB-INF directory:

<rule>

        <name>addPage</name>

        <from>/admin-ui/user-add-page-children1$</from>

        <to>/admin-ui/index-iPortal.html</to>

</rule>