Introduction<\/strong><\/h2>\n\n\n\nBy using this component we can extend or even create from the scratch user interface that will use other ServiceNow features. Service Portal is built using several well-known technologies.<\/p>\n\n\n\n
One of them is AngularJS, which is a popular front-end framework, that allows easily to create and maintain web applications with complex logic. The framework also allows using existing well-established solutions, which shortens significantly the time of developing certain customization.<\/p>\n\n\n\n
Angular Bootstrap Calendar<\/strong><\/h2>\n\n\n\nAs an example, we can use the Angular Bootstrap Calendar widget which implements a very handful solution of calendar interface<\/strong>. To install this widget we need to download the update set<\/a> and then commit on our ServiceNow instance.<\/p>\n\n\n\nAfter finishing this step successfully, we can find a page named angular_bootsrap_calendar in the Service Portal module.<\/p>\n\n\n\n
![\"Angular](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/10\/Ryc.-1-1-1024x177.png\")
<\/a>Fig. 1 Angular Bootstrap Calendar in Service Portal<\/figcaption><\/figure><\/div>\n\n\n\nThis is the entry point to the frontend logic, which we can customize later on according to our needs.<\/p>\n\n\n\n
We can use the page name to open it in the navigation bar, using a URL that looks like https:\/\/instance_name.service-now.com\/sp?id=page_name<\/em>.<\/p>\n\n\n\nIn order to add or modify the logic we can either use the Service Portal page editor or we can open the Now UI Interface and from the container go to the widget. <\/p>\n\n\n\n
![\"Page](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/10\/Ryc.-2-2-1024x433.png\")
<\/a>Fig. 2 Page Content in Angular Bootstrap Calendar<\/figcaption><\/figure><\/div>\n\n\n\nService Portal Widget<\/strong><\/h2>\n\n\n\nIn ServiceNow platform widget consists of four elements.<\/p>\n\n\n\n
HTML part which contains related static logic. As this part of platform uses AngularJS extensively, we can use here the framework directives.<\/p>\n\n\n\n
Then comes the CSS part responsible for the styling.<\/p>\n\n\n\n
When comes to scripting we have Client Script and Server Side.<\/p>\n\n\n\n
Widget Scripts<\/strong><\/h3>\n\n\n\nAccording to the names, in Client Script we place frontend logic, while the other contains backend operations<\/strong>. Client Script is essentially a controller which communicates with the server-side by the data object. It is pulled on page load, but we can also refresh it by using server.get method. Server Side part has access to all server API that is available for example Business Rules, and Script Includes. This is helpful especially for bringing data from the backend using GlideRecord API.<\/p>\n\n\n\nThe fact that both server and client-side, as well as the whole platform, is built on JavaScript, makes it easily maintainable and customizable.<\/p>\n\n\n\n
Bootstrap and AngularJS use case<\/strong><\/strong><\/h2>\n\n\n\nThe widget we describe in the article is called Test Angular Bootstrap Calendar, and as the name suggests for styling it uses the famous Bootstrap framework. We can use this tool in the whole ServicePortal, which is another enhancement of this ServiceNow application.<\/p>\n\n\n\n
When inspecting widget code we can notice that it contains another one, which is invoked by the sp-widget directive when the page is rendering.<\/p>\n\n\n\n
![\"Inspekcja](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/10\/Ryc.-3-2-1024x379.png\")
<\/a>Fig. 3 Widget code inspection<\/figcaption><\/figure><\/div>\n\n\n\nAs you can see it\u2019s very simple to embed other widgets in your page which allows to create more powerful tools through the composition of other widgets. The second widget contains the configuration of the calendar navigation bar.<\/p>\n\n\n\n
When inspecting the server script of the main widget, we can see the code that is responsible for fetching data that later on will be rendered on the calendar page.<\/p>\n\n\n\n
![\"Struktura](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/10\/Ryc.-4.png\")
<\/a>Fig. 4 Data structure on the example of the Events array<\/figcaption><\/figure><\/div>\n\n\n\nData Object<\/strong><\/strong><\/h3>\n\n\n\nAs mentioned earlier GlideRecord is used for pulling data from backend. Thus, we can bring data from any table we want. It could be time_sheet table from Project Management Module application or custom table we have create for our custom purposes.<\/p>\n\n\n\n
However, in order to display data correctly we need to ensure it has proper structure. The example is supplied in the picture above under the array called events. Every element should have the properties like:<\/p>\n\n\n\n
- title,<\/li>
- color,<\/li>
- startsAt,<\/li>
- endsAt,<\/li>
- druggable,<\/li>
- resizable.<\/li><\/ul>\n\n\n\n
Some properties like recursOn are optional.<\/p>\n\n\n\n
Logic customization and extension<\/strong><\/strong><\/h2>\n\n\n\nWhile editing client script we can see following logic.<\/p>\n\n\n\n
![\"Logika](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/10\/Ryc.-5-1.png\")
<\/a>Fig. 5 Logic when editing Client script<\/figcaption><\/figure><\/div>\n\n\n\nWe can extend it or change it according our needs. The code above is responsible for invoking modal with details of certain event.<\/p>\n\n\n\n
We also have part that is responsible for formatting calendar text related to each event. However, we can extend this logic by adding our own filters that could show events for a certain user or given state.<\/p>\n\n\n\n
In order to achieve this, we have to supply proper properties in the event list mentioned before. We also need to define an additional function in the controller and invoke them on the HTML side using angular directives.<\/p>\n\n\n\n
Another way of extending and modifying the logic is using angular templates. In the widget, we can find them under the related list. In this example, it is file calendarControls.html, which contains the UI part responsible for choosing different options of the calendar view i.e. day, week, month.<\/p>\n\n\n\n
![\"Wykorzystanie](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/10\/Ryc.-6-1-1024x315.png\")
<\/a>Fig. 6 Using Angular templates to extend and modify logic<\/figcaption><\/figure><\/div>\n\n\n\nConclusion<\/strong><\/strong><\/h2>\n\n\n\nThe example described in our text shows how flexible and customizable is Service Portal. The fact that it uses such frameworks as AngularJS and Bootstrap makes it a very powerful and efficient tool for delivering a personalized solution.<\/p>\n\n\n\n
The fact that we can use plugins, tools, and libraries, shorten the time of delivering customer requirements. Which makes Service Portal a great tool for implementing ServiceNow features tailored to customer needs.<\/p>\n\n\n\n
***<\/p>\n\n\n\n
If you are interested in topics related to ServiceNow, we recommend other articles of our specialists, e.g. ServiceNow integration with Active Directory using LDAP<\/a>.<\/p>\n\n\n
As an example, we can use the Angular Bootstrap Calendar widget which implements a very handful solution of calendar interface<\/strong>. To install this widget we need to download the update set<\/a> and then commit on our ServiceNow instance.<\/p>\n\n\n\n After finishing this step successfully, we can find a page named angular_bootsrap_calendar in the Service Portal module.<\/p>\n\n\n\n This is the entry point to the frontend logic, which we can customize later on according to our needs.<\/p>\n\n\n\n We can use the page name to open it in the navigation bar, using a URL that looks like https:\/\/instance_name.service-now.com\/sp?id=page_name<\/em>.<\/p>\n\n\n\n In order to add or modify the logic we can either use the Service Portal page editor or we can open the Now UI Interface and from the container go to the widget. <\/p>\n\n\n\n In ServiceNow platform widget consists of four elements.<\/p>\n\n\n\n HTML part which contains related static logic. As this part of platform uses AngularJS extensively, we can use here the framework directives.<\/p>\n\n\n\n Then comes the CSS part responsible for the styling.<\/p>\n\n\n\n When comes to scripting we have Client Script and Server Side.<\/p>\n\n\n\n According to the names, in Client Script we place frontend logic, while the other contains backend operations<\/strong>. Client Script is essentially a controller which communicates with the server-side by the data object. It is pulled on page load, but we can also refresh it by using server.get method. Server Side part has access to all server API that is available for example Business Rules, and Script Includes. This is helpful especially for bringing data from the backend using GlideRecord API.<\/p>\n\n\n\n The fact that both server and client-side, as well as the whole platform, is built on JavaScript, makes it easily maintainable and customizable.<\/p>\n\n\n\n The widget we describe in the article is called Test Angular Bootstrap Calendar, and as the name suggests for styling it uses the famous Bootstrap framework. We can use this tool in the whole ServicePortal, which is another enhancement of this ServiceNow application.<\/p>\n\n\n\n When inspecting widget code we can notice that it contains another one, which is invoked by the sp-widget directive when the page is rendering.<\/p>\n\n\n\n As you can see it\u2019s very simple to embed other widgets in your page which allows to create more powerful tools through the composition of other widgets. The second widget contains the configuration of the calendar navigation bar.<\/p>\n\n\n\n When inspecting the server script of the main widget, we can see the code that is responsible for fetching data that later on will be rendered on the calendar page.<\/p>\n\n\n\n As mentioned earlier GlideRecord is used for pulling data from backend. Thus, we can bring data from any table we want. It could be time_sheet table from Project Management Module application or custom table we have create for our custom purposes.<\/p>\n\n\n\n However, in order to display data correctly we need to ensure it has proper structure. The example is supplied in the picture above under the array called events. Every element should have the properties like:<\/p>\n\n\n\n Some properties like recursOn are optional.<\/p>\n\n\n\n While editing client script we can see following logic.<\/p>\n\n\n\n We can extend it or change it according our needs. The code above is responsible for invoking modal with details of certain event.<\/p>\n\n\n\n We also have part that is responsible for formatting calendar text related to each event. However, we can extend this logic by adding our own filters that could show events for a certain user or given state.<\/p>\n\n\n\n In order to achieve this, we have to supply proper properties in the event list mentioned before. We also need to define an additional function in the controller and invoke them on the HTML side using angular directives.<\/p>\n\n\n\n Another way of extending and modifying the logic is using angular templates. In the widget, we can find them under the related list. In this example, it is file calendarControls.html, which contains the UI part responsible for choosing different options of the calendar view i.e. day, week, month.<\/p>\n\n\n\n The example described in our text shows how flexible and customizable is Service Portal. The fact that it uses such frameworks as AngularJS and Bootstrap makes it a very powerful and efficient tool for delivering a personalized solution.<\/p>\n\n\n\n The fact that we can use plugins, tools, and libraries, shorten the time of delivering customer requirements. Which makes Service Portal a great tool for implementing ServiceNow features tailored to customer needs.<\/p>\n\n\n\n ***<\/p>\n\n\n\n If you are interested in topics related to ServiceNow, we recommend other articles of our specialists, e.g. ServiceNow integration with Active Directory using LDAP<\/a>.<\/p>\n\n\n<\/a><\/a>Service Portal Widget<\/strong><\/h2>\n\n\n\n
Widget Scripts<\/strong><\/h3>\n\n\n\n
Bootstrap and AngularJS use case<\/strong><\/strong><\/h2>\n\n\n\n
<\/a><\/a>Data Object<\/strong><\/strong><\/h3>\n\n\n\n
Logic customization and extension<\/strong><\/strong><\/h2>\n\n\n\n
<\/a><\/a>Conclusion<\/strong><\/strong><\/h2>\n\n\n\n