webMethods API Portal tutorial
Know Your Customer, alternatively known as Know Your Client or simply KYC, is the process of a business verifying the identity of its clients and assessing their suitability, along with the potential risks of illegal intentions towards the business relationship.
For webMethods API Portal, signup form is the only form available to collect various information required from external application developers. Right now the signup form includes below list of fields
- First name*
- Last name*
- Email*
- Password*
- Company
- Comment
Fields marked with * are mandatory ones.
Of course we know that ONE Size does not fit for everyones need. Often times these default fields may not be sufficient enough for all different types of customers. With 10.4 we have provided the ability to customize the signup form (So called KYC) completely based on your requirement. You can add more fields (as many as you want) and mark them mandatory so that they can not be skipped during registration process.
Now let us see how we can customize the default registration form to include additional fields. For the sake of tutorial, I am going to include 3 additional fields and mark two of them as absolutely mandatory. i would like to include below a list of fileds
- Phone number
- Department*
- Github profile link*
To start, let us login to API Portal as a admin user, and create and activate a new modification set.
Edit the signup form and open the template html for edit.
Include new fields
|
<div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<span class="fa fa-fw fa-github"></span>
</span>
<input type="text" class="form-control" data-portal-registration-mandatory data-portal-registration-field-name="github" placeholder="Github profile"
id="apiportal-form-github-text" style="color: rgb(153, 153, 153);">
</div>
</div>
<div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<span class="fa fa-fw fa-phone"></span>
</span>
<input type="text" class="form-control" data-portal-registration-field-name="phone" placeholder="Phone"
id="apiportal-form-phone-text" style="color: rgb(153, 153, 153);">
</div>
</div>
<div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<span class="fa fa-fw fa-file-text-o"></span>
</span>
<input type="text" class="form-control" data-portal-registration-mandatory data-portal-registration-field-name="department" placeholder="Department" id="apiportal-form-department-text" style="color: rgb(153, 153, 153);">
</div>
</div>
|
We can add above snippet of HTML code in the template form in the exact location that we need. If you take a closer look at the HTML code snippet, it is fairly straightforward. We basically include a <input> element and annotate the element with couple of data attributes to add some basic meta information that we require.
Below are the two main HTML5 data attributes that we depend on and their intention.
data-portal-registration-field-name
This HTM5 data attribute dictates the specific attribute name. Every newly included filed must have this data attribute. This is a mandatory data attribute for every field. In our case "department"/"mobile"/"github" are the field names.
data-portal-registration-mandatory
This HTM5 data attribute dictates the specific field is required or not. This is optional data attribute. If not present, the field will be assumed to be optional.
If you save the template now and navigate to registration page, you should see the registration fields populated with additional fields.
Of course, the fields included in the registration page also visible in the user profile for modifications in the later stage.