Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

Migrating a custom page to a component


  • Heya,

    I am trying to migrate the custom pages I have created in the application to components to facilitate source control and versioning but I am having an issue with passing url parameters. I believe I have created and registered the component as per the examples but I am not receiving the parameter as expected.

    Custom page:

    menu entry:

            {
                "name": "ui.groupSummary",
                "url": "/group-summary?groupName",
                "linkToPage": true,
                "permission": "user",
                "menuText": "Group Summary",
                "pageXid": "c137266c-ee8c-4d37-b93c-3f7de63d8d38",
                "menuIcon": "insert_chart",
                "menuHidden": true,
                "weight": 1006
            },
    
    

    page call (from button):

    <md-button ui-state="'ui.groupSummary'" ui-state-params="{groupName: 'Group_01'}">Group 01</md-button>
    
    

    page markup:

    <ma-ui-state-params stateParams = $pageParams></ma-ui-state-params>
    stateParams.groupName = {{stateParams.groupName}}
    
    

    page display:
    0_1578509838625_f8265231-db3a-4b87-88f5-0ed4e50cf6d1-image.png

    Component page:

    menu entry (taken from userModule.js):

    	maUiMenuProvider.registerMenuItems([
    		{
    			name: 'ui.groupView',
    			url: '/group-view?groupName',
    			// linkToPage: true,
    			// permission: "user",
    			template: '<sca-group-view></sca-group-view>',
    			menuIcon: 'fa-home',
    			menuText: 'Group View',
    			menuHidden: true,
    			weight: 997,
    			params: {
    				noPadding: false,
    				hideFooter: false,
    			},
    		},
    	]);
    

    page call (from button):

    <md-button ui-state="'ui.groupView'" ui-state-params="{groupName: 'Group_01'}">Test</md-button>
    
    

    page display (same markup as custom page):
    0_1578510346784_fc0e529d-b1fa-4de8-95ee-723fbe17633f-image.png

    How do I pass url parameters to a page component?

    I didn't find any examples that had parameter passing so I figured the menu configuration would be the same between the JSON entry and the menu registration.

    Likely there is something simple I am missing. :)

    Aside: I would have thought the JSON entry and menu registration syntax would have been the same. However, using the linkToPage and permission parameters in the registration string throws errors.

    Thanks
    Ian


  • Is your component using the uiStateProvider/$stateParams service inside the controller? I'll wager if you add that you'll be able to both visualise and debug the passed ui.StateParam variables.

    How do I pass url parameters to a page component?

    From what I've seen from looking at the watchlist code source:

    {
            name: 'ui.watchList',
            url: '/watch-list/{watchListXid}?dataSourceXid&deviceName&hierarchyFolderId&tags',
            template: '<ma-ui-watch-list-page flex="noshrink" layout="column"></ma-ui-watch-list-page>',
            menuTr: 'ui.app.watchList',
            menuIcon: 'remove_red_eye',
            params: {
                dateBar: {
                    rollupControls: true
                },
                helpPage: 'ui.help.watchList'
            },
            resolve: {
                loadMyDirectives: ['$injector', function($injector) {
                    return import(/* webpackMode: "lazy", webpackChunkName: "ui.main" */
                            './directives/watchList/watchListPage').then(watchListPage => {
                        angular.module('maUiWatchListState', [])
                            .directive('maUiWatchListPage', watchListPage.default);
                        $injector.loadNewModules(['maUiWatchListState']);
                    });
                }]
            }
        },
    
    

    you can see the state param as part of the URL, have a read of Jared's source code. It provides a damn good overview of how to tackle things.

    Good luck!

    Fox


  • Hi Matt,

    Thanks for the suggestion. Yes, I had to inject $stateParams (and maUser) into the controller to have access to that data,

        scaGroupViewController.$inject = ['$stateParams', 'maUser'];
    
    	function scaGroupViewController($stateParams, User) {
    		var ctrl = this;
    
    		this.stateParams = $stateParams;
    		this.User = User;
    
    

    Then I had to update my page to use the value from the controller. Retrieving parameters using ma-ui-state-params was no longer necessary.

    <!-- <ma-ui-state-params stateParams = $pageParams></ma-ui-state-params> -->
    
    <ma-point-query query="{$and: true, deviceName: $ctrl.stateParams.groupName, name: 'Group'}" sort="'name'" points="psGroup"></ma-point-query>
    
    <div ng-init="super = $ctrl.User.current.hasPermission('superadmin')"></div>
    

    I picked through some of the Mango component code in Github and found a few that used this pattern which helped. Which services and such I can/need to inject is still a challenge for me to figure out but your suggestion and the code helped.

    Thanks!
    Ian


  • My pleasure, glad to see you were able to figure it out!