Templates and Routes

With more complex plugins, you may find a need for multiple pages. The plugin editor provides just one HTML setting, but it can be used to define multiple AngularJS script templates. The initial plugin HTML will start with one template, similar to the following.

<script type="text/ng-template" id="my-plugin-main">
    <div class="title">
        <h1>{{text}}</h1>
    </div>
</script>

You can add additional templates, as seen below. Note that you need to use a dash-delimited version of your namespace as a prefix to your template IDs. Ex: myPlugin becomes my-plugin. This is used for consistency with the AngularJS HTML attribute format.

<script type="text/ng-template" id="my-plugin-main">
    <div class="title">
        <h1>{{text}}</h1>
    </div>
</script>
<script type="text/ng-template" id="my-plugin-index">
    <div class="title">
        <h1>index</h1>
    </div>
</script>
<script type="text/ng-template" id="my-plugin-view">
    <div class="title">
        <h1>view</h1>
    </div>
</script>

The main plugin template will need a way to toggle the other templates. This can be achieved using an ng-include. Here we will use an expression to append a dynamic value called currentPage that will be set later in the plugin JavaScript.

<script type="text/ng-template" id="my-plugin-main">
    <div ng-include="'my-plugin-' + currentPage"></div>
</script>

This example uses ng-include to display the template inline, but you can also display templates as a modal using the modal factory.

Routes

We will add support for additional routes to specify the page in the plugin JavaScript. The $routeParams dependency is needed to read the params. We also need to add the additional route param to the plugin registration under routes.

plugin.controller('myPluginCntl', ['$scope', '$routeParams', function ($scope, $routeParams) {
    
    // Default page
    $scope.currentPage = 'index';
    
    // Read page from $routeParams
    if ($routeParams.page) {
        $scope.currentPage = $routeParams.page;
    }

}])
/**
 * Plugin Registration
 */
.register('myPlugin', {
    route: '/myplugin',
    title: 'My Plugin',
    icon: 'icon-puzzle',
    interfaces: [
        {
            controller: 'myPluginCntl',
            template: 'my-plugin-main-main',
            type: 'fullPage',
            order: 300,
            topNav: true,
            // Define additional routes
            routes: [
                '/:page'
            ]
        },
        {
            controller: 'myPluginSettingsCntl',
            template: 'my-plugin-main-settings',
            type: 'settings',
            routes: [
                '/:config'
            ]
        }
    ]
});

For this example, the main plugin route would be similar to https://platform.zenginehq.com/workspaces/123/myplugin/. The additional route set on the first interfaces object for templates with a dynamic page param would be accessible by https://platform.zenginehq.com/workspaces/123/myplugin/index or https://platform.zenginehq.com/workspaces/123/myplugin/view On the second interfaces object also an additional route is set for templates with a dynamic config param that would be accessible by https://platform.zenginehq.com/workspaces/123/admin/plugin/myplugin/setting1 or https://platform.zenginehq.com/workspaces/123/admin/plugin/myplugin/setting2