Welcome to Community Week 2025! Join us to learn, connect, and be recognized as we celebrate the spirit of Community and the power of AI. Get the details  

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
  • 445 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