Custom User Settings

MattFox

Morning/Afternoon,

Am using latest mango modules at this time (3.3/3.31) and want to see if there's a means to create and store custom settings for users. Not sure if I need to take the route of creating a JSON store to hold these settings then find a means to load them on user login or if I can extend what's already there via the overrides folder. Any advice or recommendations of best implementation would be a huge help.

Thanks

Fox

phildunlap

Hi Fox,

Can you describe a little more what you're intending on using these settings for?

The JSON store is definitely a good option. You could modify something in the overrides directory probably, but without knowing more clearly what you're attempting to achieve I wouldn't begin there.

MattFox

I'm wanting to implement custom pages with their own controllers. Each User has their own respective datasources for data. This also goes in hand with only loading the controllers required for the pages that the user has access to. I'm using point.RQL and ma-point-query resources to pull the respective datapoints for that user, Settings are also needed to settings for map center coordinates and other options that could affect a controller's behaviour.
Would use the UI dashboard but I cannot see how I can put my custom controller code into a directive for one. That and I really do want a stripped down interface just to show charts and real time data for the logged in users.

Hope that's enough to give the gist of where I want to go with my custom dashboard.

Jared Wiltshire

@mattfox said in Custom User Settings:

I'm wanting to implement custom pages with their own controllers.

Are you talking about AngularJS controllers?

@mattfox said in Custom User Settings:

Would use the UI dashboard but I cannot see how I can put my custom controller code into a directive for one.

You can add custom AngularJS components/controllers/whatever via the user module on the UI settings page.

@mattfox said in Custom User Settings:

That and I really do want a stripped down interface just to show charts and real time data for the logged in users.

You can display custom pages/dashboard designer pages without the top toolbar and menu if this is what you are after. In fact I would highly recommend that.

MattFox

@jared-wiltshire Yes AngularJS controllers. However I don't want to load all controllers in my app when the user may not even have access to the corresponding page, it just adds more data to load for the browser.

Jared Wiltshire

@mattfox you can lazy load an AngularJS module from your user module like this -

// userModule.js
define(['angular', 'require'], function(angular, require) {
'use strict';

const userModule = angular.module('userModule', ['maUiApp']);

userModule.config(['maUiMenuProvider', (maUiMenuProvider) => {
    maUiMenuProvider.registerMenuItems([{
        name: 'ui.myUserPage',
        //name: 'myUserPage', <-- if you want no toolbar or menu
        url: '/my-user-page',
        // replace the xid below with the custom page xid
        template: '<ma-ui-page-view xid="b35328af-4ceb-4e81-bf10-4eb282270524"></ma-ui-page-view>',
        menuText: 'My user page',
        menuHidden: false,
        // set the user permission required to see the menu item
        permission: 'user-permission-required',
        resolve: {
            loadMyDirectives: ['maRequireQ', '$injector', function(maRequireQ, $injector) {
                
                // only loads the AngularJS module when navigating to this page
                return maRequireQ(require, ['./restrictedModule.js'], function () {
                    $injector.loadNewModules(['restrictedModule']);
                });
            }]
        }
    }]);
}]);

return userModule;

});

Then create a separate module that is only loaded when the user navigates to that page -

//restrictedModule.js

define(['angular', 'require'], function(angular, require) {
'use strict';

const restrictedModule = angular.module('restrictedModule', []);

restrictedModule.component('myComponent', {
    template: `
        <span>Your username is {{$ctrl.name}}</span>
    `,
    // you can inject services into the controller
    controller: ['maUser', function(maUser) {
        this.name = maUser.current.username;
    }]
});

});

Obviously this doesn't solve the need to store settings per user, I would recommend putting them in the JSON store for now. I personally can see the usefulness of storing arbitrary JSON data inside the user object, I can see if we can get it into a future release.

MattFox

@Jared-Wiltshire thank you!
I was using oz.lazyload for pages so it's good to see another way how to do it. I'll have to see about setting up a development environment so I can implement my codebase on top.

Jared Wiltshire

@mattfox said in Custom User Settings:

I was using oz.lazyload for pages so it's good to see another way how to do it. I'll have to see about setting up a development environment so I can implement my codebase on top.

Yeah we ditched ozLazyLoad when AngularJS came out with their own way of loading new modules via the injector. I left the library in the module in case people were using it.

MattFox

Hi Jared, sorry to make a zombie thread here ...
I've successfully upgraded to 3.77 on a local staging server from 3.5.6 to test my userModule. Gotta say I'm impressed with what I see..
However, now that you've changed a bucket load of your code base what's the best module or whatnot required to allow me to lazy load as above?

EDIT: For now I've cheekily added your maRequire service - I know there's nothing more permanent than a temporary fix but this should help me keep going whilst I develop new modules.

Going forward from here I intend to start implementing typescript and rolling my code out with webpack like you've done so any tips you can provide will be hugely beneficial.
Hope you're all keeping well at this crazy time

Fox