Custom Services

Avatar
SupportTeam

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:

mceclip1.png