HTML code of dox42 pop-up web resources

This topic explains different sections in the HTML code to give you the information required to customize the pop-up to your needs.

The web resource form

In the most basic sense, the pop-up web resource is an HTML form that is submitted when you press Generate and delivers form data to the Javascript code within the dox42 CRM solution, which in turn converts it to a JSON object that is sent via the request body.

The main form for input parameters and other options may contain any kind of form element, for example textboxes, checkboxes, selects, radio buttons etc. The form data is handled in the clientlib.js file.

<form id="inputParamForm" class="form-table">
    <div class="form-row">
        <div class="form-col">
            <label>Select a Template: </label>
        </div>
        <div class="form-col">
            <div class="dox42SelectWrapper>
                <select class="dox42Select exclude" name="dox42Template">
                    <option selected="true">Template Name 1</option>
                    <option>Template Name 2</option>
                </select>
            </div>
        </div>
    </div>
    <div class="form-row">
        <div class="form-col">
            <label>Choose a Format: </label>
        </div>
        <div class="form-col">
            <div class="dox42SelectWrapper">
                <select class="dox42Select" name="format">
                    <option selected="true">docx</option>
                    <option>pdf</option>
                </select>
            </div>
        </div>
    </div>
    <div class="form-row">
        <div class="form-col">
            <label>Enter a value: </label>
        </div>
        <div class="form-col">
            <input class="dox42Input" name="TextboxValue1" placeholder="Enter a value">
        </div>
    </div>
    <div class="form-row">
        <div class="form-col">
            <label for="chk1">Checkbox 1</label>
            <input type="hidden" value="off" name="CheckboxValue1">
            <input id="chk1" type="checkbox" class="dox42InputParamCheckbox" name="CheckboxValue1">
        </div>
        <div class="form-col">
            <label for="chk2">Checkbox 2</label>
            <input type="hidden" value="off" name="CheckboxValue2">
            <input id="chk2" type="checkbox" class="dox42InputParamCheckbox" name="CheckboxValue2">
        </div>
    </div>
    <div class="form-row">
        <div class="form-col">
            <label for="chk3">Send CRM Email?</label>
            <input id="chk3" type="checkbox" class="dox42InputParamCheckbox” exclude" name="dox42CRMEmail">
       </div>
    </div>
</form>

class “exclude”

Some form elements have the HTML class exclude. With this class you can differentiate which form data elements should be saved to the input parameter JSON object and which should be saved to the session storage where they can be retrieved later for another purpose.

Important

• You must retrieve the value of these elements yourself; they will not work automatically.

• Choosing this approach, it is recommended that you define global variables at the start of the file to avoid any errors due to typos.

For the default pop-up it looks like below:

//Defined at the start of the file or before method
let dox42TemplateValue = "dox42Template";
let dox42InputParamsValue = "dox42InputParams";
let dox42CRMEmailValue = "dox42CRMEmail";
//Implementation could look like this
var dox42Template = sessionStorage.getItem(dox42TemplateValue);
var dox42CustomData = sessionStorage.getItem(dox42InputParamsValue);
//Example implementation of a custom excluded element “dox42CRMEmail
var generateCRMEmail = sessionStorage.getItem(dox42CRMEmailValue) != null ?   sessionStorage.getItem(dox42CRMEmailValue) : false; 

Form elements with hidden fields

We recommend to handle some form elements with hidden fields with the same name, especially checkboxes and radio buttons, since these elements are “not valid form data” if they are not checked and will therefore not be saved as form data, which could lead to problems in the template.

<div class="form-col">
    <label for="chk1">Checkbox 1</label>
    <input type="hidden" value="off" name="CheckboxValue1">
    <input id="chk1" type="checkbox" class="dox42InputParamCheckbox" name="CheckboxValue1">
 </div>

The value of the checkbox overwrites the value of the hidden input if it returns a value (i. e. on).