Custom Services

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:

<body>
<div ng-controller="ServiceTest as ctr" style="margin-top: 100px">
Test Var: {{ctr.testVar}}
</div>
</body>

Result:

mceclip1.png