Portal field needs to accept employee ID as well as Name and Email for search

Andrew Bettcher
Kilo Sage

‎11-28-2023 07:11 AM

Hello,


I cloned a widget (Walk-up Check-In) so I can change a user search field on it to accept employee ID search as well as what it already does which is allow searches using email or name. I originally tried adding employee_number to ac_ref_columns but, as you have guessed, it didn't work.

I spotted some bits and pieces immediately in the widget that might help and made some changes. For example, in the HTML there is a line that reads search-fields = "'name,email'" so I added employee_number in there. 

I'm no so naive that to think that would solve it. I realise that I need to make changes to the controller and/or the angular directives but, I am naive enough to not know what those changes are. 

I'm not expecting a step by step tutorial but can anyone direct me or advise me where to look please?

This is the HTML template:

<div>
  <div ng-if="c.data.isAuthorizedUser">
    <!-- Wrapper for image and location picker -->
    <div id="form-page-header-wrapper">
      <walkup-logo-copy class="wu-logo" image="::c.data.config.logo" alt="${Walkup Logo}"></walkup-logo-copy>
			<walkup-location-picker-copy table="'wu_location_queue'"> </walkup-location-picker-copy>
    </div>
    <p>
    </p>
    <!-- Schedule widget -->
    <div>
      <sp-widget widget="c.data.scheduleWidget"></sp-widget>
    </div>
    <div ng-if="c.showCheckIn(c.data.scheduleWidget.data.schedule)">
      <!-- Check-in form -->
      <div ng-if="c.formOptions.enableEmployeeSupport && !c.showDiv.toggle">
        <!-- Employee check-in code -->
        <div class="check-in-header">
          <p>{{c.welcomeMessage}}</p>
          <p ng-if="c.data.config.showWaitTime">
            {{c.waitTimeMessage}}
          </p>
        </div>
        <form name="employeeForm" class="form-horizontal" novalidate>
        	<div class="form-field-wrapper">
        		<span class="fa fa-asterisk mandatory" title="${asterisk}">
								<span class="sr-only">${asterisk}</span>
        		</span>
        		<span>${Indicates required}</span>
     	  	</div>
          <div class="form-field-wrapper">
            <div class="tablet-field">
              <span class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': c.data.empName.value}" aria-label="Required" role="img" aria-hidden="false"/>
              <label class="show-label no-padding" for="name-dropdown">{{data.msgs.empNameMsg}}</label>
              <div class="input-icon-wrapper">
                <sn-record-picker
                                  class="form-field"
                                  name="name-dropdown"
                                  id="name-dropdown"
                                  field="c.data.empName"
                                  table="'sys_user'"
                                  display-field="c.data.primaryDisplay"
                                  placeholder="{{data.msgs.selectMsg}}"
                                  value-field="'sys_id'"
                                  search-fields="'name,email,employee_number'"
                                  display-fields="c.data.secondaryDisplay"
                                  page-size="100"
                                  default-query="'active=true'">
                </sn-record-picker>
                <div class="icon-search fa-2x"></div>
              </div>
            </div>

            <div class="tablet-field">
              <span class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': c.data.selectedIssue}" aria-label="Required" role="img" aria-hidden="false"/>
              <label class="show-label no-padding" for="issue-dropdown-employee">{{data.msgs.issueLabel}}</label>
              <div class="input-icon-wrapper">
                <sn-choice-list
                                ng-click="c.onOptionClick(c.data.selectedIssue, 'emp', 'employee-textarea')"
                                class="form-field options-drop"
                                id="issue-dropdown-employee"
                                sn-model="c.data.selectedIssue"
                                sn-text-field="label" sn-value-field="value"
                                sn-items="::c.data.issueChoices"
                                sn-options="{placeholder:data.msgs.selectMsg}"
                                >
                </sn-choice-list>
                <div class="icon-menu-arrows fa-lg"></div>
              </div>
              <label hidden for="employee-textarea">{{data.msgs.textAreaLabel}}</label>
              <!-- Show the other input field if user selects 'Other' choice -->
              <textarea ng-show="c.data.showEmployeeTextArea" id="employee-textarea" class="form-control form-field form-input" ng-model="c.data.otherIssue" rows="3" maxlength="160" placeholder="{{c.data.msgs.otherfieldMsg}}"></textarea>
            </div>
            <div class="check-in-submit">
              <button type="submit" ng-disabled="c.empCheckinBtnDisabled()" class="btn btn-primary btn-lg" ng-click="c.submitEmployeeRequest()">{{data.msgs.submitMsg}}</button>
            </div>
            <p class="check-in-header">
              <button ng-if="::c.formOptions.enableExternalSupport" class="btn btn-link toggle-link" href="" ng-click="c.showDiv.toggle = !c.showDiv.toggle">{{data.msgs.guestLink}}</button>
            </p>
          </div>
        </form>
      </div> <!-- End of employee check-in code -->


      <!-- Guest check-in code-->
      <div ng-if="c.formOptions.enableExternalSupport && c.showDiv.toggle">
        <div class="check-in-header">
          <p>
            {{c.welcomeMessage}}
          </p>
          <p ng-if="c.data.config.showWaitTime">
            {{c.waitTimeMessage}}
          </p>
        </div>

        <form name="userForm" class="form-horizontal" novalidate>
          <div class="form-field-wrapper">
        		<span class="fa fa-asterisk mandatory" title="${asterisk}" style="padding-right: .25rem">
								<span class="sr-only">${asterisk}</span>
        		</span>
        		<span>${Indicates required}</span>
     	  	</div>
          <div class="form-field-wrapper">
            <div class="tablet-field">
              <span class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': c.data.guestName}" aria-label="Required" role="img" aria-hidden="false"/>
              <label class="show-label no-padding" for="guest-name">{{data.msgs.guestNameMsg}}</label>
              <div class="input-icon-wrapper">
                <input aria-label="guest name" class="form-control form-field form-input" id="guest-name" name="guest-name" type="input" ng-model="c.data.guestName" ng-change="c.server.update()"/>
                <div class="icon-keyboard fa-2x"></div>
              </div>
              <!-- Email input and validation-->
              <div class="tablet-field form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
                <span class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': userForm.email.$viewValue}" aria-label="Required" role="img" aria-hidden="false"/>
                <label for="email" class="show-label no-padding" ng-class="{'required': userForm.email.$invalid}">{{c.validateEmail(userForm.email.$invalid)}}</label>
                <div class="input-icon-wrapper">
                  <input aria-label="guest email" ng-model="c.data.guestEmail" id="email" name="email" type="email" class="form-control form-field form-input" >
                  <div class="icon-keyboard fa-2x"></div>
                </div>
              </div>

              <div class="tablet-field">
                <span class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': c.data.selectedGuestIssue}" aria-label="Required" role="img" aria-hidden="false"/>
                <label class="show-label no-padding" for="issue-dropdown-guest">{{data.msgs.issueLabel}}</label>
                <div class="input-icon-wrapper">
                  <sn-choice-list class="form-field options-drop"
                                  id="issue-dropdown-guest"
                                  name="issue-dropdown-guest"
                                  ng-click="c.onOptionClick(c.data.selectedGuestIssue, 'guest', 'guest-textarea')"
                                  sn-model="c.data.selectedGuestIssue"
                                  sn-text-field="label"
                                  sn-value-field="value"
                                  sn-items="data.issueChoices"
                                  sn-options="{placeholder:data.msgs.selectMsg}"></sn-choice-list>
                  <div class="icon-menu-arrows fa-lg"></div>
                </div>
                <label hidden for="guest-textarea">{{data.msgs.textAreaLabel}}</label>
                <textarea ng-show="c.data.showGuestTextArea" id="guest-textarea" class="form-control form-field form-input" ng-model="c.data.otherGuestIssue" rows="3" maxlength="160" placeholder="{{c.data.msgs.otherfieldMsg}}"></textarea>
              </div>

              <div class="check-in-submit">
                <button type="button" ng-disabled="c.guestCheckinBtnDisabled()" class="btn btn-primary btn-lg" ng-click="c.submitGuestRequest()">{{data.msgs.submitMsg}}</button>
              </div>
              <p class="check-in-header">
                <button ng-if="::c.formOptions.enableEmployeeSupport" class ="btn btn-link toggle-link" href="" ng-click="c.showDiv.toggle = !c.showDiv.toggle">{{data.msgs.employeeLink}}</button>
              </p>
            </div>
          </div>
        </form>
      </div> <!-- End of guest check-in code -->
    </div> <!-- End of entire check-in code -->
  </div>
  <walkup-authorization-copy is_authorized="c.data.isAuthorizedUser" home_route="c.data.homeRoute"></walkup-authorization-copy>
</div>

 

 

 

0 Helpfuls
  • 383 Views
1 REPLY 1

ahefaz1
Mega Sage

‎01-16-2024 03:41 PM

@Andrew Bettcher ,

 

Not sure if you were able to solve this, but I did the below to make it more aligned with what I needed.

<sn-record-picker field="user" 
default-query="active=true" 
display-field="'name'" 
value-field="'sys_id'"
table="'sys_user'" query="active=true" 
template="{{name}} - {{email}}" 
display-fields="'email'" multiple="false"
sn-options="{'dropdown-options': {'width': '300px'}}" 
search-fields="'name,email,employee_number'">
</sn-record-picker>

search-fields="'name,email,employee_number'" - added employee_number just like you did. This allows me to search with the employee_number.

Added additional attribute - display-fields="'email,employee_number'", and was able to see the email and the employee number fields in the record picker dropdown.

 

 

ahefaz1_0-1705448310179.png

 

ahefaz1_1-1705448355835.png

 

Hope this helps.

Please accept solution OR mark helpful.

 

Thanks,

 

0 Helpfuls