How to Add Dynamic Controls Row in HTML Web Resource CRM

In this article, we’ll go over how to add a new row to a div tag with predefined controls in a web application. Read on for the quick tutorial!

Today, I will explain how to add a new row to a div tag with predefined controls in an HTML Web Resource.

For this, add one HTML web resource to your CRM solution and place it in any of the entity forms. I added a web resource and placed it in the Lead entity form. I have a requirement to add a Customer (Contact/Account) from the Lead form, so I placed the web resource in the Lead entity.

The functionality of this web resource is to add a new Contact or Account with their address information and other information and to also have the ability to add a new row of HTML controls with the same controls that are in the first row.

When the page loads, it will display something like the image below.

The above web resource has four buttons on the left side to add a new row, remove a row, expand or collapse a row, and a ‘save customer’ button which adds new customer records with other details.

For the above requirement, I added two div controls to the HTML page. For the first div, I applied a class, customerList, and the second div has a “customer-clone” and I also set it to hidden. Every time a user clicks on the plus sign button, it will add a new row to the web resource, like in the image below:

The following HTML is for the buttons on the left side of the web resource.

<div class="process-customer hide" style="clear: both;">
<div class="content-details customerList" style="float: left;"></div>
</div>
<div class="customer-clone hide" style="width: 100%;">
<div>
<input type="hidden" class="hiddenCustomerId" />
<div class="add-remove-buttons">
<span class="btnAddGreen"><img src="mcrm_/images/add32.png" /></span>
<span class="btnRemoveRed"><img src="mcrm_/images/remove32.png"/></span>
</div>
<i class="arrow down"></i>
<div class="div-saveButton">
<a href="javascript:;" class="button-save" data-isdisabled="true">
<img src="mcrm_/images/save32.png" title="Save your changes" />
</a>
</div>
</div>
<div style="margin-left: 4%;">
<div class="form-control mandatory">
<span class="field-label">Customer</span>
<input type="text" style="width: 150px;" />
</div>
<div class="form-control mandatory">
<span class="field-label">Amount</span>
<input class="txtAmount" type="text" style="width: 50px;" />
</div>
//………add other controls same as above
</div>
<div style="margin-left: 4%;" class="customerFields">
//………add second row controls for First Name, Last Name etc..
</div>
<div style="margin-left: 4%;" class="customerFields">
//………add third row controls for Street 1, Street 2 etc..
</div>
</div>

Add the following code to the default $(document).ready() JavaScript code block. This will add a new row of fields to the HTML web resource.

$('.customerList').on('click', '.btnAddGreen', function() {
$('. customerList').append($('.customer-clone').clone());
var addedRow = $('.customerList .customer-clone');
$(addedRow).removeClass('customer-clone hide').addClass('customer');
});

The following code will remove a row from the web resource.

$('.customerList').on('click', '.btnRemoveRed', function() {
var parentCustomer = $(this).parents('.customer');
var hiddenCustomerIdControl = $(parentCustomer).find('.customerId')[0];
var customerId = $(hiddenCustomerIdControl).val();
if (confirm('Are you sure to remove this Customer?')) {
if (customerId != null && customerId != '') {
// add here a java-script code to delete records from CRM if you want.
}
parentCustomer.remove();
}
);

The following code will expand-collapse the div control of a row.

$('.customerList').on('click', 'i', function() {
var $this = $(this);
if ($this.hasClass('down')) {
$this.removeClass('down').addClass('up');
$this.parents('.customer').find('.inner-controls').removeClass('hide');
}
else {
$this.removeClass('up').addClass('down');
$this.parents('.customer').find('.inner-controls').addClass('hide');
}
});

Finally, you can add JavaScript code to the click event of the Save Button to save customer records. You can easily get the example to save the record using a JavaScript Web API from the internet.

var parentCustomer = null;
$('.customerList').on('click', '.button-save', function() {
// add java-script code to save customer (Contact/Account).
});

The Collapse rows display looks something like the below image.

The following CSS is used in the above web resource.

.add-remove-buttons {
left: 0px;
position: absolute;
top: 5px;
}
.div-saveButton {
margin-top: 5px;
float: left;
margin-right: 10px;
}
.form-control {
display: inline-block;
margin-left: 5px;
}
.form-control input, .form-control select {
display: inline;
width: 130px;
}
.form-control i {
border: ridge black;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 5px 5px;
cursor: pointer;
margin: 7px 10px 2px 0;
}
i {
border: ridge black;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 5px 5px;
cursor: pointer;
margin: 15px 8px 2px 0;
float: left;
}
.form-control i.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.form-control i.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
i.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
i.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.hide {
display: none;
}
.customer {
padding: 0 40px 0 80px;
position: relative;
}
.mandatory span:after {
color: red;
content: '*';
font-size: 15px;
font-weight: bold;
padding-left: 3px;
}
.content-details input, .content-details select {
margin: 10px;
}