How to add additional variables on the walk-up appointment scheduling widget?

[Raskill1]

Hi Experts,

I have a requirement to customise the walk-up appointment scheduling widget - 'Online check-in experience'. Currently it has just one single variable dropdown, where we can select the reason for visiting. We need to gather more information from the user like phone, existing request reference, etc. I have created a variable set that hosts these questions and added it to the record producer associated with the appointment location but it does not show up in the widget. So i went about digging deeper into the providers and the angular templates, and I found the code in the 'walkUpAppointmentPanel' template,

<div>
<div class="wu_header">
<h4 class="form-header">{{c.headerMsg}}</h4>
<p class="reason-msg" ng-if="!c.hasAppointment">{{c.reasonMsg}}</p>
<p class="reason-msg apt-msg" ng-if="c.hasAppointment">{{c.rescheduleMsg}}</p>
</div>

<!-- Child element of directive -->
<div ng-transclude="reasonSelect" ng-if="!c.hasAppointment"></div>

<br/>

<!-- Catalog Item Variables -->
<div class="" ng-class="{'b-b wrapper-md': !data.no_fields}">
<sp-cat-item item="::data.sc_cat_item"></sp-cat-item>
<form>
<sp-model form-model="::data.sc_cat_item" mandatory="c.mandatory"></sp-model>
</form>
</div>

<br/>

<!-- Select appointment widget -->
<div ng-if="!c.hasAppointment">
<div id="appt-select-widget" class="appointment-wrapper">
<sp-widget widget="c.appointmentSelect"></sp-widget>
</div>
<br/>
</div>

<!-- Reselect appointment widget -->
<div id="appt-reselect-widget" ng-if="c.hasAppointment">
<sp-widget widget="c.appointmentReselect"></sp-widget>

<!-- Child element of directive -->
<div class="reason-text" ng-transclude="reasonText"></div>
</div>

<div ng-if="!c.hasAppointment" class="wu-submit">
<button ng-aria-label="{{c.buttonMsg}}" type="button" class="btn btn-primary appt-btn" ng-click="c.submitAppointment()" ng-disabled="c.isDisabled()">
{{c.buttonMsg}}
</button>
</div>
</div>

If you see under the 'Catalog Item Variables' section, sp-cat-item and sp-model directives are being used to render the variables I add on the record producer,  The data.sc_cat_item is populated with the object data in the server side, but for some reason it doesn't seem to render the html.

I have spent hours trying to figure this out, any help with this regard is greatly appreciated!

Thanks!

[Janel]

Oh!  I left out the getExtraVariables function.  It is probably what you can guess it is, just a lookup on item_option_new for the catalog item to get the values. 

I can't edit the original post so here it is.  I put this function around line 177, just outside of the "if (input.action === a.getConfig)".  As you can see, I'm only getting variables with the type of String or Reference.  Just cramming them into a new JSON object to call on later.

		/* Ask additional questions if the record producer has any.
		* Only looks at the producer.  Ignores variable sets. */
		function getExtraVariables(catalogID){
			var extraInfos = [];
			var itemOpts = new GlideRecord('item_option_new');
			itemOpts.addQuery('cat_item', catalogID);
			itemOpts.addQuery('active', true);
			itemOpts.addQuery('type', 6).addOrCondition('type', 8); //String and reference
			itemOpts.query();

			while(itemOpts.next()){
				var infoz = {
					sys_id: itemOpts.getValue('sys_id'),
					name: itemOpts.getValue('name'),
					type: itemOpts.getValue('type'),
					question: itemOpts.getValue('question_text'),
					reference: itemOpts.getValue('reference'),
					reference_qual: itemOpts.getValue('reference_qual')
				};
				extraInfos.push(infoz);
			}
			return extraInfos;
		} //End of function

[Justin Weitzel]

Thanks Janel, this helped validate the direction I was going with constructing the function.

I have confirmed I am retrieving the additional variables from the record producer and that the function is being called once I select the location.

What I am still having some trouble with is actually rendering the variables on the page.  I am not able to get the panel to display unless I remove 'c.catalogQuestions' form the ng=if statement in the appointmentpanel templates.  If I remove, I see where the panel is rendered but no variables within are displayed.

Did you experience anything similar as you worked through this solution or have any thoughts on why this might be?

Thank you also for the speedy response and wealth of information on this topic!

[Janel]

I did not run into that.

Silly question, but does the record producer have a string or reference variable that *is not* part of a variable set on it?

I'm assuming you mean this line in walkUpAppointmentPanelCustom (I noticed the div above is missing the < )

<div ng-include="'walkUpAdditionalInformationPanel'" ng-if="!c.hasAppointment && c.catalogQuestions"></div>

Did you create a new ng-template for the additional information?

Check to see if c.catalogQuestions has a value.  Maybe it is coming back undefined and just blowing up.

[SergioPita]

Hi Justin,

In Rome version we have the same problem, we can not see the variables in the portal. Any updates about your issue? Could you fix it?

Thanks

Sergio

[roland_mattheus]

Hi Janel, thank you for your work here.

I think the problem is that the value "c.catalogQuestions" is never defined/used within the whole widget.

Can you please have a look in your configuration?

Thank you!!!

Regards

Roland