SharePoint Online i formularze w AngularJS

Mateusz Chodkowski

SharePoint Online i formularze w AngularJS
1 czerwca, 2017 Katarzyna Sobczak

SharePoint Online i formularze w AngularJS

SharePoint daje bardzo wiele gotowych narzędzi, jednak prędzej czy później stajemy przed koniecznością wykroczenia z komfortowej strefy dostarczonych rozwiązań.

Dzisiejszy przypadek to konieczność utworzenia inteligentnego formularza, to znaczy takiego który:

  • Pozwala wprowadzić customową walidację
  • Pozwala na ukrywanie/pokazywanie pól w zależności od wprowadzonych danych/danych zalogowanego użytkownika
  • Pozwala na nietypową budowę wizualną

Dobrym pomysłem będzie utworzenie specjalnego Page’a, w którym za pomocą HTML i CSS wykonamy taki formularz. Za logikę odpowiedzialny będzie AngularJS – to pozwoli nam na manipulację zawartością i napisanie logiki.

Tworzymy prototyp

Na początku naszej drogi udamy się do widoku Pages, w którym utworzymy stronę naszego formularza:

Kolejny krok to oczywiście nazwanie strony i zapisanie jej. Do strony dodajmy prosty rozpoznawalny tekst i wciskamy przycisk Save na wstążce.

Do dalszej pracy pobierzemy naszą nowo utworzoną stronę z widoku Pages. W tym celu zaznaczamy go na liście i wybieramy opcję Download z górnego menu.

Zanim zaczniemy pracę, do wybranej przez nas biblioteki dokumentów załadujemy pliki odpowiadające za logikę naszej aplikacji. Pierwszy z nich to plik angular.min.js, który można łatwo znaleźć pod tym adresem. Drugi to plik, w którym będziemy przechowywać logikę naszego formularza. Ja nazwałem go AdvancedFormLogic.js. W drugim z plików wpisz:


alert('hello world!');

Skopiuj oba linki – okażą się niebawem potrzebne.

Wróćmy do pobranego wcześniej AdvancedForm.aspx. Plik ten najlepiej otworzyć za pomocą IDE, które będzie wspierało kolorowanie składni HTML oraz ASPX. W tej roli całkiem dobrze sprawdzi się Visual Studio Code.

Teraz znajdziemy sekcję o ID równym “PlaceHolderAdditionalPageHead”. W tym miejscu możemy dodać dodatkowe skrypty, które chcemy umieścić w naszym formularzu. Dodajmy w tym miejscu referencje do wcześniej skopiowanych linków.

Teraz możemy wgrać naszą nową wersję. Aby to zrobić musimy usunąć poprzednią i przeciągnąć nową wersję z naszego komputera na listę pages. Najłatwiej zrobić to będzie za pomocą SharePoint Designera:

Po tej operacji możemy podejrzeć nasz formularz. Jak widać, przywita nas wcześniej spreparowany tekst. Jest to jasnym sygnałem, że nasz plik AdvancedFormLogic.js został podpięty do widoku.

AngularJS

Teraz z poziomu SharePointa możemy dodać logikę uruchamiającą działanie biblioteki AngularJS. W tym celu udajemy się do pliku AdvancedFormLogic.js i wypełniamy go w taki sposób:

Logikę zostawimy na koniec.

Formularz

Częstym wymaganiem, jakie napotykają się programiści przy tworzeniu formularzy, jest ukrywanie niektórych pól w zależności od wybranych wcześniej wartości. Dla przykładu, nasz formularz będzie zapisywał dane osobowe: w przypadku, gdy osoba nie jest pełnoletnia, będzie ukrywał sekcję odpowiedzialną za dane dowodu osobistego. Dodatkowo chcielibyśmy, aby formularz sprawdzał poprawność pól oraz aby część z nich była wymagana.

We wcześniej używanym pliku .aspx w elemencie ID równym PlaceHolderMain możemy teraz pisać kod HTML naszego formularza. W tym przypadku będzie on wyglądał w ten sposób:

Należy koniecznie pamiętać, aby w dwóch pierwszych elementach atrybuty ng-app oraz ng-controllerzostały wypełnione nazwami, które wpisaliśmy w pliku odpowiedzialnym za logikę formularza. Po wgraniu pliku AdvancedForm.aspx otrzymamy taki widok:

Logika

Kolejny krok to dodanie logiki do formularza oraz do pliku AdvancedFormLogic.js

Teraz nasz formularz będzie ukrywał pola dotyczące dowodu osobistego.

Walidacja

Do formularza dodamy również walidację, która nie pozwoli wysłać go dopóki dane nie będą poprawne. W tym celu po raz kolejny edytujemy plik AdvancedForm.aspx. Przy okazji należy pamiętać, by usunąć z przycisku parametr type=”submit” i zamienić go na button (w AngularJS taka zmiana jest konieczna).

Warto zauważyć, że od teraz pola “Numer dowodu osobistego” oraz “Organ wydający dowód osobisty” są wymagane tylko wtedy, gdy mamy do czynienia z osobą dorosłą – w zwykłym formularzu listy SharePoint nie mamy możliwości ustawienia takiego wymagania.

Zapis do listy

Na koniec tworzymy listę SharePoint z odpowiednimi polami (ważne, aby wszystkie typy przesyłanych danych się zgadzały).

Teraz w naszym pliku AdvancedFormLogic.js dodajemy funkcję odpowiedzialną za zapis danych do listy.

W tym kodzie warto zauważyć, że spacje w nazwach kolumn należy zamienić na tekst _x0020_. Podobnie sprawa ma się z polskimi znakami. Literę “ę” zamieniamy na _x0119_. Prawidłowe nazwy kolumn można podejrzeć w adresie URL gdy wejdziemy w ustawienia listy i klikniemy w nazwę wybranej kolumny. Jeśli szukamy jakiegoś innego specjalnego znaku, warto odwiedzić stronę http://www.graphemica.com. Tam, po wpisaniu odpowiedniego znaku w wyszukiwarkę, otrzymamy różne formy jego kodowania. W polu “HTML Entity (Hexadecimal)” znajdziemy interesujący nas kod. Dla przykładu dla znaku “ę” otrzymamy wartość “ę”, co już łatwo zamienić na pożądane “_x0119_”.

Po takich modyfikacjach nasz formularz powinien zapisać dane do listy:

Wygląd

Gdyby wymagane było dodanie stylów CSS, programista może dodać je dokładnie tak samo jak dodał plik AdvancedFormLogic.js – to kwestia kilku kliknięć 🙂

Podsumowanie

Wykonanie dedykowanego formularza z odrębną logiką wcale nie jest takie trudne, choć wymaga nieco znajomości zarówno SharePointa, jak i technologii webowych. Tak napisany formularz łatwo jest przebudować na inny.

Podziel się

Autor: Mateusz Chodkowski

Mateusz Chodkowski

Mateusz-Chodkowski

Programista .NET i SharePoint, twórca aplikacji front-end i projektant procesów WEBCON BPS. Fascynatem programowania w .NET oraz JavaScript, projektant i entuzjasta cyfryzacji “papierowych” procesów biznesowych, a prywatnie miłośnik historii oraz rysunku.

Ostatnie artykuły autora

Migracja archiwalnych skanów umów do nowego procesu WEBCON BPS

Migracja archiwalnych skanów umów do nowego procesu WEBCON BPS

Cyfryzacja papierowych procesów, poza licznymi zaletami, wiąże się również z wyzwaniami, takimi jak migracja archiwalnych danych. Co zrobić z archiwalnymi danymi? Jak w prosty sposób migrować archiwalne dane do procesu WEBCON BPS?

Proces modyfikacji wzorca do generowania dokumentów w WEBCON BPS

Proces modyfikacji wzorca do generowania dokumentów w WEBCON BPS

W artykule omówiono kwestię podmiany wzorców, na podstawie których procesy WEBCON BPS generują pliki. Rozwiązanie to pozwala na wykonanie takiej czynności ręcznie, jednak można zautomatyzować ten proces i dodać do niego element kontroli.

Niestandardowe wykresy w WEBCON BPS

Niestandardowe wykresy w WEBCON BPS

Artykuł porusza problem skomplikowanych raportów na podstawie danych z procesów WEBCON BPS. Rozwiązanie Business Process Suite pozwala na szybkie „wyklikanie” wykresów jako elementów strony SharePoint. Co jednak zrobić, gdy klient wymaga bardziej szczegółowego rozwiązania?

Zarejestruj się i przetestuj APN Meeting Room

Wypróbuj system rezerwacji sal w praktyce, na Twojej infrastrukturze.
Wersja demonstracyjna umożliwia Ci instalację oprogramowania na 3 urządzeniach.

Chcę otrzymywać treści marketingowe od A.P.N. Promise S.A. drogą elektroniczną
Chcę otrzymywać treści marketingowe od A.P.N. Promise S.A. telefonicznie

Administratorem danych osobowych gromadzonych z wykorzystaniem formularza jest A.P.N. Promise S.A. z siedzibą w Warszawie. Kontakt z osobą odpowiedzialną za ochronę danych osobowych jest możliwy za pośrednictwem adresu e-mail: iodo@promise.pl. Podane dane będą przetwarzane w zakresie niezbędnym do realizacji określonego żądania zgodnie z art. 6 ust. 1 lit. b RODO, w zakresie niezbędnym dla prawidłowej realizacji żądania oraz oferowania i świadczenia usług, marketingu produktów i usług własnych oraz przeprowadzenia ankiet i oceny satysfakcji zgodnie z art. 6 ust. 1 lit. f RODO przez okres niezbędny dla realizacji celów oraz w przypadku wyrażenia zgody na podstawie art. 6 ust. 1 lit. a RODO w celu dostarczenia treści marketingowych środkami komunikacji elektronicznej lub za pomocą urządzeń telefonicznych.

Przysługuje Ci prawo do żądania dostępu do danych osobowych, ich sprostowania, usunięcia lub ograniczenia przetwarzania, jak również prawo sprzeciwu wobec przetwarzania, prawo do przenoszenia danych, a także prawo złożenia skargi do organu nadzorczego, którym w Polsce jest Prezes Urzędu Ochrony Danych Osobowych. Podanie danych jest dobrowolne, jednak niezbędne dla realizacji powyżej wskazanych celów. Odbiorcami danych mogą być podmioty lub osoby obsługujące administratora w zakresie w zakresie hostingu, komunikatorów internetowych, usług IT, księgowości, archiwizacji. Więcej informacji w Polityce Prywatności oraz Regulaminie.

Register and test the APN Meeting Room booking system.

Registering and installing the trial version you are allowed to install the software on 3 devices.

I want to receive marketing content from A.P.N. Promise S.A. electronically
I want to receive marketing content from A.P.N. Promise S.A. by phone

The data controller of personal data collected using the form is A.P.N. Promise S.A. with its registered office in Warsaw. Contact with the person responsible for the personal data protection is possible via following e-mail address: iodo@promise.pl. The given data shall be processed to the extent necessary to carry out specified request in accordance with art. 6(1)(b) of GDPR and to the extent necessary for the correct realization of the request and offer and provision of services, own product and services marketing and conducting surveys and satisfaction ratings in accordance with art. 6(1)(f) of GDPR for the period necessary to achieve the purposes and in the event of consent in accordance with art. 6(1)(a) of the GDPR to provide marketing content by electronic means or by telephone devices.

You have the right to request access to your personal data, rectification, deletion or limitation of processing, as well as the right to object to processing, the right to transfer data and the right to lodge a complaint with a supervisory authority, i.e. the President of the Personal Data Protection Office in Poland. Providing data is voluntary but necessary for the realization of the above-mentioned purposes. Recipients of data may be entities or persons servicing the data controller in the field of hosting, instant messengers, IT services, accounting, archiving. More information in the Privacy Policy and Regulations.

Cybersecurity w obszarze zarządzania zasobami oprogramowania

Napisz do nas, a skontaktujemy się z Tobą i bezpłatnie porozmawiamy o Twoim poziomie cyberbezpieczeństwa w obszarze SAM.

 

Administratorem danych gromadzonych z wykorzystaniem formularza jest A.P.N. Promise S.A. Podane przez Ciebie dane będą przetwarzane w zakresie niezbędnym do podjęcia kontaktu lub realizacji określonego żądania zgodnie z art. 6 ust. 1 lit. b RODO przez okres niezbędny dla realizacji Twojego zgłoszenia. Wszelkie informacje w zakresie przetwarzania podanych przez Ciebie w formularzu danych oraz posiadanych uprawnieniach znajdziesz w Polityce prywatności. Kliknij i dowiedz się więcej jeżeli informacje podane powyżej nie są dostatecznie jasne!

Zostaw adres mailowy i nie przegap kolejnego szkolenia!

[contact-form-7 404 "Not Found"]