Wprowadzenie<\/strong><\/h2>\n\n\n\nZa pomoc\u0105 Service Portalu mo\u017cemy rozszerzy\u0107 lub nawet stworzy\u0107 od podstaw interfejs u\u017cytkownika, kt\u00f3ry b\u0119dzie wykorzystywa\u0142 inne funkcjonalno\u015bci ServiceNow. Modu\u0142 ten powsta\u0142 przy wykorzystaniu kilku znanych technologii.<\/p>\n\n\n\n
Jedn\u0105 z nich jest AngularJS \u2013 popularny front-endowy framework, pozwalaj\u0105cym w \u0142atwy spos\u00f3b tworzy\u0107 i utrzymywa\u0107 aplikacje internetowe ze z\u0142o\u017con\u0105 logik\u0105. Framework ten pozwala r\u00f3wnie\u017c na korzystanie z istniej\u0105cych, sprawdzonych ju\u017c rozwi\u0105za\u0144, co znacznie skraca czas implementacji niekt\u00f3rych element\u00f3w.<\/p>\n\n\n\n
Angular Bootstrap Calendar<\/strong><\/h2>\n\n\n\nJako przyk\u0142ad mo\u017ce pos\u0142u\u017cy\u0107 widget Angular Bootstrap Calendar, kt\u00f3ry implementuje bardzo por\u0119czne rozwi\u0105zanie interfejsu kalendarza<\/strong>. Aby zainstalowa\u0107 ten widget musimy najpierw pobra\u0107 go ze strony<\/a>, a nast\u0119pnie doda\u0107 do naszej instancji ServiceNow.<\/p>\n\n\n\nKolejnym krokiem jest modyfikacja logiki, czego zadaniem jest dostosowanie kalendarza do potrzeb projektu. W tym celu nale\u017cy otworzy\u0107 w trybie edycji widget o nazwie angular_bootstrap_calendar w module Service Portal.<\/p>\n\n\n\n
![\"Angular](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/10\/Ryc.-1-1-1024x177.png\")
<\/a>Ryc. 1 Angular Bootstrap Calendar w Service Portalu<\/figcaption><\/figure><\/div>\n\n\n\nJest to punkt wej\u015bcia dla logiki frontendowej, kt\u00f3r\u0105 da si\u0119 p\u00f3\u017aniej dostosowa\u0107 wedle naszych potrzeb.<\/p>\n\n\n\n
Opcji jest kilka. Mo\u017cemy u\u017cy\u0107 nazwy strony, aby otworzy\u0107 j\u0105 w pasku nawigacyjnym, u\u017cywaj\u0105c adresu URL:
https:\/\/instance_name.service-now.com\/sp?id=page_name<\/em><\/p>\n\n\n\nAby doda\u0107 lub zmodyfikowa\u0107 logik\u0119, mo\u017cemy skorzysta\u0107 z edytora stron Service Portal lub otworzy\u0107 Now Platform user interface, gdzie z kontenera przejdziemy do widgetu. <\/p>\n\n\n\n
![\"Page](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/10\/Ryc.-2-2-1024x433.png\")
<\/a>Ryc. 2 Page Content w Angular Bootstrap Calendar<\/figcaption><\/figure><\/div>\n\n\n\nService Portal Widget<\/strong><\/h2>\n\n\n\nService Portal Widget sk\u0142ada si\u0119 z czterech element\u00f3w.<\/p>\n\n\n\n
Pierwszym z nich jest HTML, kt\u00f3ry zawiera powi\u0105zan\u0105 statyczn\u0105 logik\u0119. Poniewa\u017c ta cz\u0119\u015b\u0107 platformy szeroko wykorzystuje AngularJS, mo\u017cemy tutaj skorzysta\u0107 z dyrektyw frameworka.<\/p>\n\n\n\n
Kolejna cz\u0119\u015b\u0107 zawiera komponent CSS odpowiedzialny za form\u0119 prezentacji, wygl\u0105d strony. <\/p>\n\n\n\n
Je\u015bli chodzi o cz\u0119\u015b\u0107 skryptow\u0105 to mamy Client Script oraz Server Side:<\/p>\n\n\n\n
Widget Scripts<\/strong><\/h3>\n\n\n\nZgodnie z nazwami, w sekcji Client Script umieszczamy logik\u0119 frontendow\u0105, natomiast Server Side Script zawiera operacje zwi\u0105zane z backendem.<\/strong> Client Script jest w zasadzie kontrolerem, kt\u00f3ry komunikuje si\u0119 z logik\u0105 umieszczon\u0105 w Server Side Script poprzez obiekt danych. Client Script jest pobierany w momencie \u0142adowania strony, ale mo\u017cemy go r\u00f3wnie\u017c od\u015bwie\u017cy\u0107 za pomoc\u0105 metody server.get, kt\u00f3ra pobiera dane z backendu. Z kolei Server Side ma dost\u0119p do wszystkich API ServiceNow Backendu, kt\u00f3re s\u0105 dost\u0119pne np. w Business Rules oraz Script Includes. Jest to pomocne zw\u0142aszcza przy pobieraniu danych z backendu za pomoc\u0105 GlideRecord API.<\/p>\n\n\n\nFakt, \u017ce wszystkie wcze\u015bniej wymienione komponenty, a tak\u017ce ca\u0142a platforma, jest zarz\u0105dzana w oparciu o JavaScript, sprawia, \u017ce jest ona \u0142atwa w utrzymaniu i dostosowywaniu do wymaga\u0144 danego u\u017cytkownika.<\/p>\n\n\n\n
Wykorzystanie Bootstrap oraz AngularJS<\/strong><\/h2>\n\n\n\nWidget opisany w artykule nosi nazw\u0119 test_angular_bootstrap_calendar i jak sama nazwa wskazuje w warstwie prezentacji wykorzystuje on znany framework o nazwie Bootstrap. Framework ten mo\u017cemy r\u00f3wnie\u017c u\u017cy\u0107 w wielu innych komponentach ServicePortalu.<\/p>\n\n\n\n
Podczas inspekcji kodu widgetu, mo\u017cna zauwa\u017cy\u0107, i\u017c zawiera on kolejny widget, wywo\u0142ywany przez dyrektyw\u0119 sp-widget podczas renderowania strony.<\/p>\n\n\n\n
![\"Inspekcja](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/10\/Ryc.-3-2-1024x379.png\")
<\/a>Ryc. 3 Inspekcja kodu widgetu<\/figcaption><\/figure><\/div>\n\n\n\nJak wida\u0107, bardzo \u0142atwo jest osadzi\u0107 inne widgety na stronie, co pozwala na tworzenie bardziej rozbudowanych narz\u0119dzi poprzez kompozycj\u0119 wielu widget\u00f3w. Drugi widget zawiera konfiguracj\u0119 paska nawigacyjnego kalendarza.<\/p>\n\n\n\n
Podczas inspekcji skryptu serwera g\u0142\u00f3wnego widgetu mo\u017cemy zobaczy\u0107 kod odpowiedzialny za pobieranie danych, kt\u00f3re p\u00f3\u017aniej b\u0119d\u0105 renderowane na stronie kalendarza.<\/p>\n\n\n\n
![\"Struktura](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/10\/Ryc.-4.png\")
<\/a>Ryc. 4 Struktura danych na przyk\u0142adzie tablicy Events<\/figcaption><\/figure><\/div>\n\n\n\nPobieranie danych<\/strong><\/h3>\n\n\n\nJak wspomniano wcze\u015bniej GlideRecord s\u0142u\u017cy do pobierania danych z backendu. Mo\u017cemy wi\u0119c pobra\u0107 je z dowolnej tabeli np. time_sheet z aplikacji Project Management Module lub innej, stworzonej przez nas na w\u0142asne potrzeby.<\/p>\n\n\n\n
Aby jednak dane wy\u015bwietla\u0142y si\u0119 poprawnie, musimy zadba\u0107 o ich odpowiedni\u0105 struktur\u0119. Przyk\u0142ad widoczny jest na rysunku powy\u017cej pod tablic\u0105 o nazwie events. Zawiera list\u0119 zdarze\u0144, czyli element\u00f3w danego kalendarza. Ka\u017cdy z nich powinien posiada\u0107 w\u0142a\u015bciwo\u015bci takie jak:<\/p>\n\n\n\n
- title,<\/li>
- color,<\/li>
- startsAt,<\/li>
- endsAt,<\/li>
- druggable,<\/li>
- resizable.<\/li><\/ul>\n\n\n\n
Niekt\u00f3re w\u0142a\u015bciwo\u015bci jak np. recursOn s\u0105 opcjonalne.<\/p>\n\n\n\n
Rozszerzanie i modyfikacja logiki<\/strong><\/h2>\n\n\n\nPodczas edytowania client script widzimy nast\u0119puj\u0105c\u0105 logik\u0119.<\/p>\n\n\n\n
![\"Logika](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/10\/Ryc.-5-1.png\")
<\/a>Ryc. 5 Logika podczas edytowania Client script<\/figcaption><\/figure><\/div>\n\n\n\nSkrypt mo\u017cemy rozszerza\u0107 lub zmienia\u0107 w zale\u017cno\u015bci od potrzeb. Powy\u017cszy kod jest odpowiedzialny za wywo\u0142anie modala ze szczeg\u00f3\u0142ami danego zdarzenia tzn. elementu w kalendarzu.<\/p>\n\n\n\n
Istnieje r\u00f3wnie\u017c cz\u0119\u015b\u0107 odpowiedzialna za formatowanie tekstu kalendarza zwi\u0105zanego z ka\u017cdym zdarzeniem. Ponadto, mo\u017cemy rozszerzy\u0107 t\u0105 logik\u0119, dodaj\u0105c w\u0142asne filtry, kt\u00f3re wska\u017c\u0105 wydarzenia dla danego u\u017cytkownika lub danego stanu.<\/p>\n\n\n\n
Aby to osi\u0105gn\u0105\u0107, musimy dostarczy\u0107 odpowiednie w\u0142a\u015bciwo\u015bci we wspomnianej wcze\u015bniej li\u015bcie zdarze\u0144. Powinni\u015bmy r\u00f3wnie\u017c zdefiniowa\u0107 dodatkow\u0105 funkcj\u0119 w kontrolerze i wywo\u0142a\u0107 j\u0105 po stronie HTML za pomoc\u0105 dyrektyw Angulara.<\/p>\n\n\n\n
Innym sposobem na rozszerzenie i modyfikacj\u0119 logiki jest wykorzystanie szablon\u00f3w Angulara. W widgecie znajdziemy je w sekcji related list. W tym przyk\u0142adzie jest to plik calendarControls.html, kt\u00f3ry zawiera cz\u0119\u015b\u0107 UI odpowiedzialn\u0105 za wyb\u00f3r r\u00f3\u017cnych opcji widoku kalendarza tj. dzie\u0144, tydzie\u0144, miesi\u0105c.<\/p>\n\n\n\n
![\"Wykorzystanie](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/10\/Ryc.-6-1-1024x315.png\")
<\/a>Ryc. 6 Wykorzystanie szablon\u00f3w Angulara do rozszerzania i modyfikowania logiki<\/figcaption><\/figure><\/div>\n\n\n\nPodsumowanie<\/strong><\/h2>\n\n\n\nPowy\u017cszy przyk\u0142ad prezentuje u\u017cycie komponentu Angular Bootstrap Calendar w Service Portalu. Jest to jednak jedynie jedno z wielu narz\u0119dzi dost\u0119pnych w module ServiceNow. Uzmys\u0142awia to jak elastycznym i \u0142atwym w konfiguracji jest Service Portal.<\/p>\n\n\n\n
Fakt, \u017ce wykorzystuje on takie frameworki jak AngularJS i Bootstrap sprawia, \u017ce staje si\u0119 idealnym narz\u0119dziem do tworzenia spersonalizowanych rozwi\u0105za\u0144. Dzi\u0119ki temu, \u017ce mamy mo\u017cliwo\u015b\u0107 korzystania z wtyczek, narz\u0119dzi i bibliotek, mo\u017cemy wdro\u017cy\u0107 wymagania klienta w stosunkowo kr\u00f3tkim czasie oraz rozbudowa\u0107 ServiceNow o nowe funkcjonalno\u015bci, kt\u00f3re nie s\u0105 na starcie dostarczane z platform\u0105.<\/p>\n\n\n\n
***<\/p>\n\n\n\n
Je\u015bli interesuje Ci\u0119 tematyka zwi\u0105zana z ServiceNow, polecamy inne artyku\u0142y naszych specjalist\u00f3w np.: Integracja ServiceNow z Active Directory przy u\u017cyciu LDAP<\/a>.<\/p>\n\n\n
Jako przyk\u0142ad mo\u017ce pos\u0142u\u017cy\u0107 widget Angular Bootstrap Calendar, kt\u00f3ry implementuje bardzo por\u0119czne rozwi\u0105zanie interfejsu kalendarza<\/strong>. Aby zainstalowa\u0107 ten widget musimy najpierw pobra\u0107 go ze strony<\/a>, a nast\u0119pnie doda\u0107 do naszej instancji ServiceNow.<\/p>\n\n\n\n Kolejnym krokiem jest modyfikacja logiki, czego zadaniem jest dostosowanie kalendarza do potrzeb projektu. W tym celu nale\u017cy otworzy\u0107 w trybie edycji widget o nazwie angular_bootstrap_calendar w module Service Portal.<\/p>\n\n\n\n Jest to punkt wej\u015bcia dla logiki frontendowej, kt\u00f3r\u0105 da si\u0119 p\u00f3\u017aniej dostosowa\u0107 wedle naszych potrzeb.<\/p>\n\n\n\n Opcji jest kilka. Mo\u017cemy u\u017cy\u0107 nazwy strony, aby otworzy\u0107 j\u0105 w pasku nawigacyjnym, u\u017cywaj\u0105c adresu URL: Aby doda\u0107 lub zmodyfikowa\u0107 logik\u0119, mo\u017cemy skorzysta\u0107 z edytora stron Service Portal lub otworzy\u0107 Now Platform user interface, gdzie z kontenera przejdziemy do widgetu. <\/p>\n\n\n\n Service Portal Widget sk\u0142ada si\u0119 z czterech element\u00f3w.<\/p>\n\n\n\n Pierwszym z nich jest HTML, kt\u00f3ry zawiera powi\u0105zan\u0105 statyczn\u0105 logik\u0119. Poniewa\u017c ta cz\u0119\u015b\u0107 platformy szeroko wykorzystuje AngularJS, mo\u017cemy tutaj skorzysta\u0107 z dyrektyw frameworka.<\/p>\n\n\n\n Kolejna cz\u0119\u015b\u0107 zawiera komponent CSS odpowiedzialny za form\u0119 prezentacji, wygl\u0105d strony. <\/p>\n\n\n\n Je\u015bli chodzi o cz\u0119\u015b\u0107 skryptow\u0105 to mamy Client Script oraz Server Side:<\/p>\n\n\n\n Zgodnie z nazwami, w sekcji Client Script umieszczamy logik\u0119 frontendow\u0105, natomiast Server Side Script zawiera operacje zwi\u0105zane z backendem.<\/strong> Client Script jest w zasadzie kontrolerem, kt\u00f3ry komunikuje si\u0119 z logik\u0105 umieszczon\u0105 w Server Side Script poprzez obiekt danych. Client Script jest pobierany w momencie \u0142adowania strony, ale mo\u017cemy go r\u00f3wnie\u017c od\u015bwie\u017cy\u0107 za pomoc\u0105 metody server.get, kt\u00f3ra pobiera dane z backendu. Z kolei Server Side ma dost\u0119p do wszystkich API ServiceNow Backendu, kt\u00f3re s\u0105 dost\u0119pne np. w Business Rules oraz Script Includes. Jest to pomocne zw\u0142aszcza przy pobieraniu danych z backendu za pomoc\u0105 GlideRecord API.<\/p>\n\n\n\n Fakt, \u017ce wszystkie wcze\u015bniej wymienione komponenty, a tak\u017ce ca\u0142a platforma, jest zarz\u0105dzana w oparciu o JavaScript, sprawia, \u017ce jest ona \u0142atwa w utrzymaniu i dostosowywaniu do wymaga\u0144 danego u\u017cytkownika.<\/p>\n\n\n\n Widget opisany w artykule nosi nazw\u0119 test_angular_bootstrap_calendar i jak sama nazwa wskazuje w warstwie prezentacji wykorzystuje on znany framework o nazwie Bootstrap. Framework ten mo\u017cemy r\u00f3wnie\u017c u\u017cy\u0107 w wielu innych komponentach ServicePortalu.<\/p>\n\n\n\n Podczas inspekcji kodu widgetu, mo\u017cna zauwa\u017cy\u0107, i\u017c zawiera on kolejny widget, wywo\u0142ywany przez dyrektyw\u0119 sp-widget podczas renderowania strony.<\/p>\n\n\n\n Jak wida\u0107, bardzo \u0142atwo jest osadzi\u0107 inne widgety na stronie, co pozwala na tworzenie bardziej rozbudowanych narz\u0119dzi poprzez kompozycj\u0119 wielu widget\u00f3w. Drugi widget zawiera konfiguracj\u0119 paska nawigacyjnego kalendarza.<\/p>\n\n\n\n Podczas inspekcji skryptu serwera g\u0142\u00f3wnego widgetu mo\u017cemy zobaczy\u0107 kod odpowiedzialny za pobieranie danych, kt\u00f3re p\u00f3\u017aniej b\u0119d\u0105 renderowane na stronie kalendarza.<\/p>\n\n\n\n Jak wspomniano wcze\u015bniej GlideRecord s\u0142u\u017cy do pobierania danych z backendu. Mo\u017cemy wi\u0119c pobra\u0107 je z dowolnej tabeli np. time_sheet z aplikacji Project Management Module lub innej, stworzonej przez nas na w\u0142asne potrzeby.<\/p>\n\n\n\n Aby jednak dane wy\u015bwietla\u0142y si\u0119 poprawnie, musimy zadba\u0107 o ich odpowiedni\u0105 struktur\u0119. Przyk\u0142ad widoczny jest na rysunku powy\u017cej pod tablic\u0105 o nazwie events. Zawiera list\u0119 zdarze\u0144, czyli element\u00f3w danego kalendarza. Ka\u017cdy z nich powinien posiada\u0107 w\u0142a\u015bciwo\u015bci takie jak:<\/p>\n\n\n\n Niekt\u00f3re w\u0142a\u015bciwo\u015bci jak np. recursOn s\u0105 opcjonalne.<\/p>\n\n\n\n Podczas edytowania client script widzimy nast\u0119puj\u0105c\u0105 logik\u0119.<\/p>\n\n\n\n Skrypt mo\u017cemy rozszerza\u0107 lub zmienia\u0107 w zale\u017cno\u015bci od potrzeb. Powy\u017cszy kod jest odpowiedzialny za wywo\u0142anie modala ze szczeg\u00f3\u0142ami danego zdarzenia tzn. elementu w kalendarzu.<\/p>\n\n\n\n Istnieje r\u00f3wnie\u017c cz\u0119\u015b\u0107 odpowiedzialna za formatowanie tekstu kalendarza zwi\u0105zanego z ka\u017cdym zdarzeniem. Ponadto, mo\u017cemy rozszerzy\u0107 t\u0105 logik\u0119, dodaj\u0105c w\u0142asne filtry, kt\u00f3re wska\u017c\u0105 wydarzenia dla danego u\u017cytkownika lub danego stanu.<\/p>\n\n\n\n Aby to osi\u0105gn\u0105\u0107, musimy dostarczy\u0107 odpowiednie w\u0142a\u015bciwo\u015bci we wspomnianej wcze\u015bniej li\u015bcie zdarze\u0144. Powinni\u015bmy r\u00f3wnie\u017c zdefiniowa\u0107 dodatkow\u0105 funkcj\u0119 w kontrolerze i wywo\u0142a\u0107 j\u0105 po stronie HTML za pomoc\u0105 dyrektyw Angulara.<\/p>\n\n\n\n Innym sposobem na rozszerzenie i modyfikacj\u0119 logiki jest wykorzystanie szablon\u00f3w Angulara. W widgecie znajdziemy je w sekcji related list. W tym przyk\u0142adzie jest to plik calendarControls.html, kt\u00f3ry zawiera cz\u0119\u015b\u0107 UI odpowiedzialn\u0105 za wyb\u00f3r r\u00f3\u017cnych opcji widoku kalendarza tj. dzie\u0144, tydzie\u0144, miesi\u0105c.<\/p>\n\n\n\n Powy\u017cszy przyk\u0142ad prezentuje u\u017cycie komponentu Angular Bootstrap Calendar w Service Portalu. Jest to jednak jedynie jedno z wielu narz\u0119dzi dost\u0119pnych w module ServiceNow. Uzmys\u0142awia to jak elastycznym i \u0142atwym w konfiguracji jest Service Portal.<\/p>\n\n\n\n Fakt, \u017ce wykorzystuje on takie frameworki jak AngularJS i Bootstrap sprawia, \u017ce staje si\u0119 idealnym narz\u0119dziem do tworzenia spersonalizowanych rozwi\u0105za\u0144. Dzi\u0119ki temu, \u017ce mamy mo\u017cliwo\u015b\u0107 korzystania z wtyczek, narz\u0119dzi i bibliotek, mo\u017cemy wdro\u017cy\u0107 wymagania klienta w stosunkowo kr\u00f3tkim czasie oraz rozbudowa\u0107 ServiceNow o nowe funkcjonalno\u015bci, kt\u00f3re nie s\u0105 na starcie dostarczane z platform\u0105.<\/p>\n\n\n\n ***<\/p>\n\n\n\n Je\u015bli interesuje Ci\u0119 tematyka zwi\u0105zana z ServiceNow, polecamy inne artyku\u0142y naszych specjalist\u00f3w np.: Integracja ServiceNow z Active Directory przy u\u017cyciu LDAP<\/a>.<\/p>\n\n\n<\/a>
https:\/\/instance_name.service-now.com\/sp?id=page_name<\/em><\/p>\n\n\n\n<\/a>Service Portal Widget<\/strong><\/h2>\n\n\n\n
Widget Scripts<\/strong><\/h3>\n\n\n\n
Wykorzystanie Bootstrap oraz AngularJS<\/strong><\/h2>\n\n\n\n
<\/a><\/a>Pobieranie danych<\/strong><\/h3>\n\n\n\n
Rozszerzanie i modyfikacja logiki<\/strong><\/h2>\n\n\n\n
<\/a><\/a>Podsumowanie<\/strong><\/h2>\n\n\n\n