A service can be helpful if you have functions that you'd like to use on multiple dashboard pages.
NOTE: If this isn't working for you, your portal might not be up to date. Contact us at support@mediumone.com to get the latest portal.
Setting up the Service
STEP 1: Create a new dashboard page
In your Super Admin account, go to "Developer" > "Dashboard Builder" > "New Page"
STEP 2: Set up page configuration
- Page name - anything you want
- Page route - anything you want
- Allow page for specific user role - depends on who needs access to the service. For the most coverage, select "All Users [including non-Account]"
- Show page in navigation menu - uncheck
- Allow page before and after account subscription - add "Before Subscription" if needed
- Special page - check
- Select type - Service
STEP 3: Write service code
HTML should be empty.
Sample JS:
(function() {
'use strict';
angular
.module('app.M1DashboardController')
.service('MyService', MyService);
MyService.$inject = [];
function MyService() {
this.test = function() {
return "SERVICE VALUE!"
}
}
})();
Notes:
- Take note of what you name the service (the first parameter in the call to the "service" function - 'MyService') - you will need this in the next step.
- It is crucial that in the module declaration (.module('app.M1DashboardController')), you do not add [] as a second parameter. This will cause conflict with the other dashboard pages.
- Take note of what you name the function(s), you will need them in the next step.
- Make sure to declare your function(s) the same way we did in the example: "this.<function name> = function() {}"
- Our function "test" returns a string "SERVICE VALUE!"
Using the Service
STEP 1: Open/create dashboard page
STEP 2: Inject your service into the controller
ServiceTest.$inject = ['$scope', 'MyService'];
Since our service is named "MyService" we add "MyService" to our $inject list for the controller.
Don't forget to add the service's name to the controller's function declaration as well:
function ServiceTest($scope, MyService) {
}
STEP 3: Use the service functions
Use the format "<service name>.<function name>()" to call a function from your service, ie "MyService.test()".
The function in our test service returned a string. To show that it worked, we can set a variable in our controller to equal the value returned from the service's function and display it in the HTML.
Sample JS:
(function() {
"use strict";
angular
.module('app.service_test',[])
.controller('ServiceTest',ServiceTest);
ServiceTest.$inject = ['$scope', 'MyService'];
function ServiceTest($scope, MyService) {
var vm = this;
vm.testVar = MyService.test();
}
})();
Sample HTML:
<div ng-controller="ServiceTest as ctr" style="margin-top: 100px">
Test Var: {{ctr.testVar}}
</div>
Result: