Add metadata bound fields in ASP pages
This topic will describe how you can add fields to the Classic ASP pages of Content Manager 's web client.
Procedure
- In the <header> of the page add the .js scripts that will allow to find the values of the added fields.
<script type="text/javascript" src="Scripts/MetadataBinding/MetadataBindingFormRenderer.js"></script> <script type="text/javascript"> // Apply binding after the document is ready $(function () { Trisoft.MetadataBinding.FormRenderer.applyBindings("", function () { // Do your custom stuff here }); }); </script> - On the <form> add the "data-metadatabinding-view" attribute.
<form method="POST" action="DocumentMsg.asp" target="DocumentMsg" data-metadatabinding-view='{ "fieldLevel": "Logical" }'> - Within the <form> add the "data-metadatabinding-property" to apply the binding on a property
<div class="property" data-metadatabinding-property='{ "fieldName": "FTESTCITIES" }'> <label>Cities <span class="mandatory">*</span></label> <input type="text" class="text" name="FTESTCITIES" value="BRU, AMS" /> <input type="hidden" name="ORIG-FTESTCITIES" value="BRU, AMS" /> <div class="help">Cities</div> </div> - It is possible to use binding on a non-metadatabinding proprerty in the <form> and make it read-only. In this case the "data-property" attribute is available withe the setting "disabled'.
<div class="property" data-property='{ "fieldName": "FTITLE", "getValue": "getText", "disabled": true }'> <label>Title <span class="mandatory">*</span></label> <input type="text" class="text" name="FTITLE" value="Current Title" /> <input type="hidden" name="ORIG-FTITLE" value="Current Title" /> <div class="help">Title of the object</div> </div>Note: The "getValue" property will be used to pass the value as a fieldsfilter. (This is a custom implementation and will no be present in the OOB)Example script: // Methods for getting the value of a property function getText() { return $("input[type='text']", this).val(); } function getCheckBox() { var returnValue = ""; var checked = $("input:checked", this); $.each(checked, function (i) { returnValue += $(checked[i]).val(); if (i < (checked.length - 1)) { returnValue += ", "; } }); return returnValue; } function getSelect() { return $("select", this).val(); } function getRadio() { return $("input:checked", this).val(); } function getTextarea() { return $("textarea", this).val(); }Note: Possible issue: Event handlers can be removed from the elements inside the <form> element if they are attached using javascript, so not as a property element. This needs to be checked when doing a custom implementation.