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'
        }
    ];
})();

[Sebastian L]

Hi!

Can you share more about the purpose? Because, if it is only to set color some other html element, then you can achieve it by using ng-class. See below for example, then you can play around with it in your dev 😄 

You can add this in your html: 

<div>
<div ng-class="color">Please color me!</div>
  <button type="button" class="btn btn-default" ng-click="color='green-color'">Change Color</button>
</div>

Add the css below in the css section of the widget: 

//CSS:
 .blue-color {
    background-color: blue;
 }
 .green-color {
    background-color: green;
 }

If you need it to be a bit more advanced, then you can control with values etc, but then I would need to know your html setup to help further 🙂 

[asher14]

Hi Sebastian,

This was really helpful! How would I script for it to toggle between the 2 (Colorize : Un-colorize)?

My biggest blocker is how to return the cell which field name is 'user' with a green background. Wouldn't that action be in the client script?

[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'
        }
    ];
})();

[Sebastian L · Accepted solution]

Example shown: