Cloning the walk-up experience widget (Online Check-in Experience widget)

Janel · ‎05-26-2020

Has anyone successfully cloned the walk-up experience widget: Online check-in experience?

We want to add an option for people to reference an existing task record as part of their appointment scheduling so I need to edit the widget to give them that option.

I've clone the widget Online Check-in Experience.
I've created copies of the 8 ng-templates and renamed them.
I've created copies of the 4 angular providers (directives) so they can reference the updated templates (templateUrl).
I've looked for any "ng-include=" that needs to be updated in the HTML and updated all the inline directives.
I've scoured the client and server scripts for any references to the original templates or directives.

And for the life of me, I still cannot get the dang widget to render properly. The "reason for visit" select box template will not render at all on the page and the Scheduling widget does not render correctly (or at all) either. The hours, location, and *parts* of the away messages do work fine.

Before I went as far as creating copies of the directives, if I had BOTH the custom widget and OOB widget on the page it *seemed* to work fine except some console errors about duplicate ID's, which is no good.

Has anyone actually been able to clone this widget and get it to work? What am I missing that the reason select box won't render and the scheduling widget call won't work? I did *not* try and clone the scheduling widget and it is using OOB.

Janel · ‎06-10-2020

I opened a HI ticket about cloning the widget and what could have been missed. That resulted in our dev instance being rebooted. After that everything seemed to start working. I was able to confirm these steps do work in an entirely different instance.

Clone the Widget

Make sure you are in the "Walk-Up Experience" application scope!
Go to Service Portal > Widgets and open the widget Online check-in experience (online-check-in-experience).
At the top-right, click Clone Widget.
1. If you weren't redirected to your widget, open the copy you just created.
Give your copy a new ID (top left). For the remainder of this post, I'll use the suffix copy for everything, but you can name it whatever you want.
1. "online-check-in-experience-copy"

Copy the 8 ng-templates

Open the OOB widget.
Scroll down to the Templates related list.
Make a copy of all 8 templates and attach it to your copied widget. The name must be unique. I used the suffix of Copy (with a capital C) for each template.
1. It must be in camel case and no special characters! Not even dashes!
2. It will be referenced in kebab case in the HTML (you'll see later).
For reference here are the ng-templates I made copies of. You do not need to change anything in these templates.
1. awayMessagesCopy
2. onlineConfirmationModalCopy
3. promptConfirmationModalCopy
4. queueTemplateCopy
5. reasonForVisitSelectCopy
6. scheduledHoursCopy
7. walkUpAppointmentPanelCopy
8. This is the one that tricked me. If you notice on line 9 in the walkUpAppointmentPanel template, there is this ng-transclude. This does not need to be changed. You'll see where it gets referenced by a directive later.

<div ng-transclude="reasonSelect" ng-if="!c.hasAppointment"></div>

1. walkUpOnbehalfAppointmentPanelCopy
2. 1. Just like its counterpart above, there is also an ng-transclude looking at reasonSelect.

Copying and updating the 4 Agular Providers (just the Directives)

Open the OOB widget and scroll down to the Angular Providers related list.
You will need to make copies of these 4 directives, with new names, and include these changes:

1. onlineScheduleMessageCopy
2. 1. Update line 10 with the copied template name: templateUrl: 'awayMessagesCopy',
3. reasonForVisitSelectCopy
4. 1. Update line 12 with the copied template name: templateUrl: 'reasonForVisitSelectCopy',
5. walkUpAppointmentCopy
6. 1. Update line 15 with the copied template name: templateUrl: 'walkUpAppointmentPanelCopy',
  2. Update line 18 in the transclude with the copied reasonForVisitSelectCopy template: templateUrl: 'walkUpAppointmentPanelCopy',
  3. 1. This is where that transclude from the ng-template happens.
7. walkUpOnbehalfAppointmentCopy
8. 1. Update line 16 with the copied template name: templateUrl: 'walkUpOnbehalfAppointmentPanelCopy',
  2. Update line 19 in the transclude with the copied reasonForVisitSelectCopy template: 'reasonSelect': '?reasonForVisitSelectCopy'
Open your cloned widget.
Scroll down to the Angular Providers related list.
Remove the 4 original directives.
1. onlineScheduleMessage
2. reasonForVisitSelect
3. walkUpAppointment
4. walkUpOnbehalfAppointment
Add your 4 copied and updated directives.
1. onlineScheduleMessageCopy
2. reasonForVisitSelectCopy
3. walkUpAppointmentCopy
4. walkUpOnbehalfAppointmentCopy

Updating the widget's HTML

Open your cloned widget.
1. You can open it in the full UI or in the widget editor, it does not matter.
Calls to the angular directives and templates will be made using kebab case in HTML. Google it if you don't know what it is.
Unfortunately, there are no line numbers in the HTML field. To make this significantly easier to point out where to make changes, copy the entire HTML contents into the HTML field of a UI page so you can see line numbers.
1. Copy all the HTML contents from your widget.
2. Create a new UI Page (you do not need to save it).
3. Delete all the contents in the HTML field on the UI page.
4. Paste the HTML from your widget into the HTML field on the UI page.
5. Now things can be referenced by line number (or you can search the HTML for the changes noted below).
At line 108
1. Change <online-schedule-message to <online-schedule-message-copy
At line 112
1. Change </online-schedule-message> to </online-schedule-message-copy>
At line 116
1. Change <reason-for-visit-select to <reason-for-visit-select-copy
At line 120
1. Change </reason-for-visit-select> to </reason-for-visit-select-copy>
At line 135
1. Change <online-schedule-message to <online-schedule-message-copy
At line 139
1. Change </online-schedule-message> to </online-schedule-message-copy>
At line 161
1. Change <div ng-include="'queueTemplate'"></div> to <div ng-include="'queueTemplateCopy'"></div>
  1. This one does not go to kebab case because it is being called as an include.
2. At line 177
  1. Change <walk-up-appointment to <walk-up-appointment-copy
3. At line 187
  1. Change <reason-for-visit-select to <reason-for-visit-select-copy
4. At line 192
  1. Change </reason-for-visit-select> to </reason-for-visit-select-copy>
5. At line 193
  1. Change </walk-up-appointment> to </walk-up-appointment-copy>
6. At line 215
  1. Change <walk-up-onbehalf-appointment to <walk-up-onbehalf-appointment-copy
7. At line 226
  1. Change <reason-for-visit-select to <reason-for-visit-select-copy
8. At line 231
  1. Change </reason-for-visit-select> to </reason-for-visit-select-copy>
9. At line 232
  1. Change </walk-up-onbehalf-appointment> to </walk-up-onbehalf-appointment-copy>
10. At line 245
  1. Change ng-include="'scheduledHours'" to ng-include="'scheduledHoursCopy'"
11. Copy the updated HTML back into your cloned widget.

Updating the widget's client controller

Open your cloned widget.
1. You can open it in the full UI or in the widget editor, it does not matter.
On line 312
1. Change c.data.msgs.agreeModalMsg, c.data.msgs.stayInQueueMsg, clearFields, postLeaveQueueConf, 'promptConfirmationModal');
2. To c.data.msgs.agreeModalMsg, c.data.msgs.stayInQueueMsg, clearFields, postLeaveQueueConf, 'promptConfirmationModalCopy');
On line 591
1. Change walkUpModal.thresholdModal($scope, data.userPosition, 'onlineConfirmationModal');
2. To walkUpModal.thresholdModal($scope, data.userPosition, 'onlineConfirmationModalCopy');
On line 640
1. Change clearFields, postQueueChange, 'promptConfirmationModal');
2. To clearFields, postQueueChange, 'promptConfirmationModalCopy');

Put your copied widget on a page and give it a test.

This worked for me on a fresh instance.

View solution in original post

Renee Yu · ‎10-07-2021

Hi;

I was wondering after cloning the widget and using the cloned widget instead of the OOB widget, did anybody have issues with the OOB walkup notifications and walkup events(to trigger the notifications)?

I followed the steps mentioned above to clone the "online check-in experience" widget. I then used the cloned widget on the walkup page instead of the OOB widget. After that, I noticed the OOB walkup notifications are not being sent out any more. That is due to all the OOB walkup events are not being generated to trigger the notifications.

Appreciated your help.

Thanks,

Renee

jMarshal · ‎10-13-2021

I suspect this is simply not something that was thought of by the original author and they're not worried about the notifications so it wasn't included in this guide...which is a shame because I am also interested in the notifications and if you've followed this guide and come up with issues, I suspect I may also. I am not anticipating this discovery as I doubt it will be easy to resolve...I have no ng-angular experience and we have no resource for that in our company and this seems to be a specific thing for some widgets (ones with ng-angular templates are not "straight forward" or "wysisyg" -- https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0745615)

Mario Preciado · ‎11-29-2021

Hello.

They should check if the corresponding steps were followed, in my case after cloning everything works correctly and we have customized the sending of notifications

Sara3 · ‎11-30-2021

Mario, I'm interested to know what version of SN you are on. We tried what others have mentioned above and we also had issues with the notifications. Can you explain in more detail what you mean by "we have customized the sending of notifications"? Thanks!

Sara3 · ‎11-30-2021

Renee,

We also have had problems with the notifications not triggering.