Migrating a custom page to a component

[iperry]

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:

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):

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

[MattFox]

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

[iperry]

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

[MattFox]

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