Documentation Center

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

  1. 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>
  2. On the <form> add the "data-metadatabinding-view" attribute.
    <form method="POST" action="DocumentMsg.asp" target="DocumentMsg" data-metadatabinding-view='{ "fieldLevel": "Logical" }'>
  3. 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>
  4. 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>
    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();
    }