Button on service portal

[asher14]

I have a requirement to place a button on a page on the service portal. The button should say "Colorize" OR "Uncolorize".

The button should do 2 things. When clicked (Colorize)highlight the user name field to show that a user has not been selected. When clicked to (Uncolorize) the highlighted fields go away.

I have the button on the widget from the HTML. But I am not certain how to script in client controller for the action.

I currently want to test in my PDI before scripting in customer developer instance. 

Any resources for the angular js on how to do this ? 

I am a new coder 🙂

pls help

[Sebastian L · Accepted solution]

Hi again,

Sure, you are right - let me show you an example: 

So in the HTML we have a ng-repeat where we run through our data. In this example I have made a small array that consist of two objects and in there we have a name. I then call the objects item when I do the ng-repeat. This also means I can add other properties to the object, and I have one called toggleShow. I look for if the item.toggleShow is true, then I want to have the class 'colorize' and if not I want the class non-colorize. WHen I click I set that specific object's "tottleShow" to the opposite of what it was. 

HTML:

    <div ng-repeat="item in data.items">
      <div><span ng-class="item.toggleShow ? 'colorize' : 'non-colorize'" ng-click="item.toggleShow = !item.toggleShow">{{item.name}}</span></div>
    </div>

Client: 

api.controller=function($scope) {
  /* widget controller */
  var c = this;
//By default the toggleShow is false, which means it will show e.g. Red in this case. Once clicked it will switch to green
	  $scope.toggleShow = function (ym) {
      $scope.toggleShow[ym] = !$scope.toggleShow[ym];
  };
};

CSS:

.colorize {
 background-color: green; 
}
.non-colorize {
 background-color: red; 
}

Server:

(function() {

    data.items = [{
            name: 'Global',
            sys_id: 'f28f89a42fda49503eb45e492799b677'

        },
        {
            name: 'Non-Global',
            sys_id: '213'
        }
    ];
})();

[asher14]

THANK YOU! Super helpful