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.
- 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 ScriptCheck out this link to know the other ways which you can use to embed a widget into another widget.
- Header Links
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:
- Navigate to Service Portal > Menus on the Application Navigator.
- Open the header menu record that you would like to work with.
- Scroll down to the Menu Items Related List.
- Select New.
- Configure the record. (see image for example)
- Save or Submit the record.
- Static Footer
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.
***************************************************************************************
***************************************************************************************
In case you need any help, feel free to connect with me on LinkedIn
List of All Articles and Videos -Pranav Bhagat
Thank you for your help on Service Portal. Do you have any advise on how to create a custom footer for the CSM portal? I am looking to create a footer similar to the one that is OOTB for the ESC portal which has a Menu and Links.
Example:
If you have any how to guide on how to achieve this - it will be appreciated thanks
