How to add a text field on OOB CSM Walk-up Check-In widget?

[Sid_Takali]

Hi all, 

I have a requirement where I have to add a new custom text field on a OOB CSM Walk-up Check-In Widget.  I need to add a field in the below widget. How can I add this?

[Arava Gopi]

Hi Siddharam,

Could you please provide the exact name of the widget because I can't be able to find that in my instance with above details. 
Is it portal widget? or Platform widget?

If it is a portal widget, then please check what type of widget it is. If it is icon link type, then open related catalog/record producer & add the new field there. Otherwise, you need to add the field in HTML panel in widget editor.

Thanks & Regards,
Gopi

[Sid_Takali]

Hi Arava,

This is the widget name "CSM Walk-up Check-In" and it is a Portal Widget.

[Arava Gopi]

Hi Siddharam,

As that widget is an OOB Widget. First, you need to clone that widget & make changes to HTML content in new cloned widget. After the changes you have to remove the existing widget from this page (csm_walkup_check_in) & add new cloned widget to that page using page designer. But making changes to OOB widgets is not recommended unless there is no other option.

I added the father name field to that widget in front-end but didn't make any back-end changes here.

Attached the HTML script for your reference.
<div class="form-field-wrapper">
<div class="tablet-field">
<label ng-class="{'show-label': c.data.guestFatherName}" for="guest-father-name">{{data.msgs.guestFatherNameLabel}}</label>
<div class="input-icon-wrapper">
<input autocomplete="fatherName" class="form-control form-field form-input" id="guest-father-name" type="input" placeholder="{{data.msgs.guestFatherNameMsg}}"/>
<div class="icon-keyboard fa-2x"></div>
</div>

Prerequisites: AngularJS, HTML & Javascript.

If it answers your question, pls mark it as helpful.

Thanks & Regards,

Gopi