Tips and Techniques for Service Portal Developers - Part 1

[Pranav Bhagat]

Hi Everyone !

I am starting a new series of articles on Tips and Techniques for Service Portal Developers .

The goal of this series is to consolidate a list of common challenges which almost every developer will come across when they work on Service Portal.

In every part I will share 5 Tips and Techniques(Based on My Experience and Based on Community Questions in the Service Portal Topic) which will be useful for a Service Portal Developer.

Let's get started :

1. Using Inspect Element to Change the CSS

Inspect Element is a perfect way to learn what makes the web tick, figure out what's broken on your sites, mock up what a color and font change would look like, and keep yourself from having to Photoshop out private details in screenshots. It's a super-power you never knew your browser possessed.

Inspect element provides tons of features but we will only look into the CSS part today.

2. Styling a Container

This is very common scenario where you want to change the style of a particular Container on Page.

3. Page Routes

Multiple widgets in the Service Portal may link to a single page using a hard-coded page ID. If you want to replace the page, all widgets that reference the page must be updated with the new page ID. Instead of cloning and updating each widget with the new page ID, you can create a single record that automatically redirects all references to the original page to point to the new page. This way, you can replace a page without locating and replacing all references to the page ID.

4. Communication between a Client to a Server in a widget

 I have seen lot of questions about how the client side and server side of a widget can communicate with each other so here in this video I will give a small example.

Script Used in the Video

HTML

<div class ='top'>
  <span>${My Tasks}</span>
  <ul class="list-group"> 
    <li ng-if="c.data.tasks.length == 0" class="list-group-item">${No Tasks}</li>
    <li class="list-group-item" ng-repeat="task in c.data.tasks">
      <span>{{task}}</span>
    </li>
  </ul>
  <div class="input-group-btn">
      <input type="text" ng-model="c.data.task" class="form-control">
    <button type="submit" ng-click="c.add()" class="btn btn-primary">Add</button>
  </div>
</div>

CSS

.top{
  margin: 10px;
  border: 1px solid black;
  padding: 8px;
  color: darkblue;
}
.input-group-btn{
  margin: 10px;
  text-align: center;
}
button{
  margin: 5px;
}

Client Script

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

	c.add = function() {
		c.data.action = "addTask";
		c.server.update().then(function(){
			c.data.action = undefined;
			c.data.task = "";
		})
	}
};

Server Script

(function() {
	/* populate the 'data' object */
	/* e.g., data.table = $sp.getValue('table'); */
	data.tasks = [];
	if (input) {
		data.tasks = input.tasks;
		if (input.action == "addTask") {
			data.tasks.push(input.task);
		}
	}
	
	})();

5. Language Translation –Part 1

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.

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

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

Do let me know in the comments about some of the common issues that you might have faced during your Service Portal Implementation.

In case you need any help, feel free to connect with me on LinkedIn

Pranav Bhagat

List of All Articles and Videos -Pranav Bhagat

[Pranav Bhagat]

Please let me know in the comments what are the common issue you face a Service Portal Developer 🙂

[Pranav Bhagat]

Please let me know in comments what challenges you face 🙂

[Pranav Bhagat]

Do let me know in the comments about some of the common issues that you might have faced during your Service Portal Implementation.

[Pranav Bhagat]

Do let me know in the comments about some of the common issues that you might have faced during your Service Portal Implementation.

[Pranav Bhagat]

Do let me know in the comments about some of the common issues that you might have faced during your Service Portal Implementation.

[Pranav Bhagat]

Do let me know in the comments about some of the common issues that you might have faced during your Service Portal Implementation.

[Community Alums]

Thanks for the detailed tips and explanations. I was looking for this in the entire community.. found this article. This is the savior. 

[Pranav Bhagat]

Thanks Deepak 🙂

[vipultomi]

Though inspect element is a great way for changing the CSS, Lightroom offers too many premium functionality which will saves the time in editing. it helps in detailed editing. It is quality photo editing app. You must try it.