Dynamic form for creating and editing a Contractor object
With the form builder, you can set up the visibility and the Required field setting of context variables on object creation and editing forms. However, unlike custom objects, in system objects, you cannot use scripts in the form builder, but you can use javascript and Razor.
In this example, we are going to create a dynamic form for the Contractor system object, particularly, we will create a filter for one object that depends on another one.
Create objects
To create a dynamic form for creating and editing a Contractor object, you need to create two objects, one which will contain a link to the other.
Create the Work Type object which will be used as a filter:
.png)
.png)
Save and publish the Work Type.
Create the Work object, which will be filtered:
.png)
In the Work object create a property of the Work Type type:
.png)
Save and publish the Work object.
Add two properties of the Work and Work Type types to the Contractor object:
.png)
Save and publish the Contractor object, restart the server.
Create a form
In the folder \UserConfig\WebApplication\Modules\EleWise.ELMA.CRM.Web\View (if there isn't one, create it) create a file Contractor_create.cshtml.
Content of the file Contractor_create.cshtml:
<script type=’text/javascript’>
function setFilter(id){
var selectUrl = id > 0 ? "/Common/Entity/Select?uid={uid_object1}&filterProviderUid=3d23090b-7809-40aa-beec-b19042591a82&filterProviderData={object1_attribute}%3D"+id : "/Common/Entity/Select?uid={uid_object1}";
$(’#Entity_{object1_name}_Id’).data(’tComboBox’).ajax.selectUrl=selectUrl;
}
$(document).ready(function(){
$(’#Entity_{object2_name}_Id’).bind(’valueChange’, function(e){setFilter(e.value);});
setTimeout("setFilter($(’#Entity_{object2_name}_Id’).val())", 100);
});
</script>where
{uid_object1} - UID of the first object, which contains a link to the second one and will be filtered. you can find it in your browser URL bar if you open the object:
.png)
{object1_attribute} - name of the property of the second object type in the first object:
.png)
{object1_name} - property name of the first object type in the Contractor object, which needs to be filtered:
.png)
{object2_name} - name of the second property in the Contractor object, which will be used to filter:
.png)
Add a panel to the form for creating and editing the Contractor object:
.png)
In the panel settings, on the General tab, select No style in the Style field, so that it was not visible on the form.
.png)
On the System tab, specify a path to the Razor form: ~/Modules/EleWise.ELMA.CRM.Web/View/Contractor_create.cshtml
.png)
The content of the Contractor_create.cshtml file in this example:
<script type=’text/javascript’>
function setFilter(id){
var selectUrl = id > 0 ? "/Common/Entity/Select?uid=e4b32ba2-9966-4047-9eef-8bf8cc53542a&filterProviderUid=3d23090b-7809-40aa-beec-b19042591a82&filterProviderData=WorkType%3D"+id : "/Common/Entity/Select?uid=e4b32ba2-9966-4047-9eef-8bf8cc53542a";
$(’#Entity_Work_Id’).data(’tComboBox’).ajax.selectUrl=selectUrl;
}
$(document).ready(function(){
$(’#Entity_WorkType_Id’).bind(’valueChange’, function(e){setFilter(e.value);});
setTimeout("setFilter($(’#Entity_{object2_name}_Id’).val())", 100);
});
</script>As the result, before specifying the work type, the full list of work is displayed:
.png)
After specifying the work type, a filtered list is displayed:
.png)