Helpcenter +918010117117 https://cdn1.storehippo.com/s/573db3149f0d58741f0cc63b/ms.settings/5256837ccc4abf1d39000001/57614ef64256dc6851749879-480x480.png" support@storehippo.com https://www.facebook.com/StoreHippohttps://twitter.com/StoreHippohttps://www.linkedin.com/company/hippoinnovations/https://plus.google.com/+Storehippo/posts
B4,309-10 Spaze iTech Park, Sector 49, Sohna Road, 122001 Gurgaon India
call to replace anchor tags contains '/admin' in href

Edit form field with widget type

Steps involved in editing the form field with the widget type:

  •  Add a widget in the design theme  
  • Edit form field widget type
  • Use that name in form field settings
  • Add logic in that widget so that scope fields will get data and set the value accordingly

Add a widget in the design theme 

To add a new widget check out this blog to understand step by step process. Click here

Edit form field widget type

  • Go to the dashboard.  Site --> Form.

  • Select the forms from the list of forms.

  • Choose the label name for the customization, in the same row you will find a dropdown for type, a select widget from the dropdown.

  • Click on the settings icon next to the dropdown. 

Use that name in form field settings

  • Now, type the name of your widget which you have created, in front of the widget input box.

  • Click on save and continue.

Here are some examples of the widget customization for form fields.

Example 1: 

1. After going to the design theme panel, click on add a new widget. Here add the name of the widget as per your convenience.  Read More..

2. Check out an example of the code generating city name with the help of Pincode.

So for that, the template code would be like this as shown,

<label for="{{field.name}}">{{field.label|msTranslate}}</label>
<input type="text" ng-readonly="field.settings.read_only" class="form-control" id="{{field.name}}"
       ng-model='fields[field.name]'
       placeholder="{{field.settings.placeholder|msTranslate}}">

sample_widget_template

3. This is the controller code.

function ($scope) {
 $scope.$watch('fields.zip', function (newValue, oldValue) {
   if ($scope.fields['zip'] == '122001') $scope.fields[$scope.field.name] = 'Gurgaon'
 })
}

sample_widget_template

4. The output will as shown below. By typing Pincode 122001, automatically Gurgaon will come under city-input box.

Example 2: 

1. Now if you want by typing City name, Pincode will appear that functionality can be achieved by the below code. 

2. Template code will be the same as above, but the controller code would look like this.

function ($scope) {
 $scope.$watch('fields.city', function (newValue, oldValue) {
   if ($scope.fields['city'] == 'Delhi') $scope.fields[$scope.field.name] = '110001'
 })
}

3. Call the widget this time under the Pincode label as shown.

In this way, you can edit the form field with the widget type.

Share:

2020-11-10T08:06:10.216Z