This was the exact reason I needed to clone that widget in the first place!  😄

This is what I did.  I tried using that built in catalog form method, but it'd never displayed correctly so I gave up on that immediately. 

I can add certain variable types from the associated appointment record producer and use the record producer to do any mapping/update/lookups/whatever based on the values.  I'm getting the variables directly and I have no clue how to get it to follow any UI policies or client scripts or just pull in the record producer (in a way that works).  Also, I'm ignoring variable sets because I don't want the extra questions to repeat the questions from the appointment variables.

There is some trouble with mandatory questions (which I'm sure you could easily work in), but it suits our basic needs.  Hopefully this helps!

Updating the ng-templates

I added a 9th ng-template called "walkUpAdditionalInformationPanel" to render the variables on the page.  Right now it is only doing references and strings, so you'll need to add more variable types as needed.  It just dawned on me you MIGHT be able to use this to display the actual record producer, but I'm not sure how well submitting will work.

<br />
<div>
  <div ng-repeat="item in c.catalogQuestions track by item.sys_id">
      {{item.question}}

    <div ng-if="item.type == 8">
      <sn-record-picker ng-change="c.itemChanges(item.value, item)" class="catalog-questions"
                        field="item.value"
                        table="item.reference"
                        display-field="'name'"
                        page-size="25"
                        search-field="'name, user_name'"
                        value-field="'sys_id'"
                        default-query="item.reference_qual"
                        sn-required="true" 
                        aria-required="true">
      </sn-record-picker>
    </div>
    <br />
    <div ng-if="item.type == 6">
      <input type="text" class="form-control catalog-questions" ng-model="item.value" ng-change="c.itemChanges(item.value, item)"  id="{{item.name}}" ng-model-options="{debounce: 1000}" aria-required="true" required />
    </div>
  </div>
  <p/>

</div>

On the "walkUpOnbehalfAppointmentPanelCustom" ng-include, under this line near the top,

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

Add an ng-include to the new ng-template:

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

And then also add it to the "walkUpOnbehalfAppointmentPanelCustom" ng-include in the same spot.

Updating Directives

Hopefully you added customized directives already.  Open the "walkUpAppointmentCustom" directive.  The c.createAppointment function needs to be updated to check for extra questions that were included and to send those over to the main widget.  Within the c.createAppointment function, send your catalog questions back with the picked snAppointment.  Around line 70ish?

catQuestions: c.catQuestions

c.createAppointment({
					snAppointment: c.selectedDate,
					catQuestions: c.catQuestions,
					callback: function(success) {

Updating the Server Script

The server script will be responsible for looking up the catalog variables and making them available for use.  At the end of the "if (input.action === a.getConfig) {" and before the "return", add the question lookup (somewhere around line 155).  Remember, we're not looking for variable set questions so we don't duplicate the the appointment questions.

if (data.catalogID) {
				if(options.extra_questions == 'true'){
					data.extraCatQuestions = getExtraVariables(data.catalogID);				
				}else{
					data.extraCatQuestions = undefined;
				}

				data.currentUser = gs.getUserID();
				data.apptmnt = AppointmentFacade.fetchTaskRecord(data.currentUser, queueId);

				data.appointmentSelect = getApptSelectWidget(data.catalogID, config.locationId, data.currentUser);
				setApptmntReselectState(data.apptmnt, data.catalogID);
				data.userOnBehalfEligibility = WalkUpUtil.checkEligibility(gs.getUser(), queueId);

				data.hasAppointmentBooking = true;
			} else {
				data.hasAppointmentBooking = false;
			}

Updating the main Client Controller

I think lastly, is updating the client controller to accept the extra questions as part of the payload that is submitted. 

In the c.createAppointment function in the main client controller, update the function to include the catQuestions as the second parameter.

c.createAppointment = function(snAppointment, catQuestions, callback) {

And then, just have the payload JSON object is created, add your catQuestions into it.  Somewhere around line 246.

		//Add the addtional questions to the payload if there are any
		if(catQuestions != undefined){
			for(var k in catQuestions){
				if(catQuestions[k] != ''){
					payload[k] = catQuestions[k];
				}
			}
		}

In the record producer itself you'll need to use the Script field to do any question mapping or update whatever it is you need to with the extra information.