Hi Everyone !

This is the second article of the series Tips and Techniques for Service Portal Developers .If you haven't read the first article then click here.

Let's get started with Part-2:

• Using Conditional ng-class directive

The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.

Code used in the video:

HTML

<p ng-class=" data.priority == 'p1' ? 'p-red' : 'p-green'">Note Priority:</p>
<select ng-model="data.priority">
 <option ng-repeat="x in priority" value="{{x.value}}">{{x.value}}</option>
</select>

CSS

.p-red{
  color: red;
  font-size: 20px;
}

.p-green{
  color: green !important;
}

Client Script

api.controller=function($scope) {
  /* widget controller */
  var c = this;

    $scope.priority = [
        {value : "p1"},
        {value : "p2"},
        {value : "p3"}
    ];
};

Server Script

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
data.priority = 'p3';
})();

• Embed a Widget into another widget

Lot of times we embed a widget to another widget mostly because of reusability purpose e.g. the typeahead widget embedded in homepage search widget. You can embed any widget inside of the HTML template of another widget using the sp-widget directive*.*

Code used in the video

 <sp-widget widget="data.Widget2"></sp-widget>  //data.Widget2 will hold the Widget ID in Server Script

Check out this link to know the other ways which you can use to embed a widget into another widget.

A Menu items represent a link on the header of a page whose purpose is to provide navigation link, either within the current page or to other pages.

Example of Menu item

To create a Menu Item follow the below process:

1. Navigate to Service Portal > Menus on the Application Navigator.
2. Open the header menu record that you would like to work with.
3. Scroll down to the Menu Items Related List.
4. Select New.
5. Configure the record. (see image for example)
6. Save or Submit the record.

I have seen lot of questions about how to make the footer stick to the bottom of the page, so here in this video I will show you how you can do that without writing a single line if code.

• Language Translation –Part 2

When you build a Custom Enterprise Portal which supports multiple countries then definitely you need to translate the portal based on the country’s language. In the video we will see how to do basic Language Translation in widget using gs.getmessage.

***************************************************************************************

***************************************************************************************