DocStar ECM Forms. Forms Designer Guide

Transcription

1 DocStar ECM Forms Forms Designer Guide

2 The contents of this document are for informational purposes only and are subject to change without notice. DocStar makes no guarantee, representations, or warranties with regard to the enclosed information and specifically disclaims, to the full extent of the law, any applicable implied warranties, such as fitness for a particular purpose, merchantability, satisfactory quality, or reasonable skill and care. This document and its contents, including the viewpoints, dates, and functional content expressed herein are believed to be accurate as of its date of publication, 08/17. The usage of any DocStar products or services is subject to DocStar standard terms and conditions then in effect. Usage of the solution(s) described in this document with other software or third-party products may require the purchase of licenses for such other products. DocStar and the DocStar logo are our trademarks or registered trademarks in the United States, and in certain other countries and/or the EU. Copyright All rights reserved.

3 Table of Contents Introduction to Forms... 1 What are Forms?... 1 Why Forms?... 1 A Practical Example... 2 Forms Navigator... 3 Designing a Form... 4 Content Type... 4 Basic Elements... 5 Settings... 5 Choosing an Element... 5 Dragging and Selecting Elements... 6 Element Options... 7 Field Map... 7 Copy and Paste... 7 Label and Value Properties... 7 Help Text... 7 Synchronize Value... 8 Formula... 8 Advanced Field Groups Group Settings The Field Group Controls Form Element Details Text Box Label Multiple Choice True/False Checkboxes Dropdown Section Break Name Address Title Keywords Status Number Website Link Phone... 18

4 Date Date/Time ComboBox Image File Upload Created On Form Options General Field Settings Advanced JavaScript Render with JavaScript CSS Layout Multi-Part Forms Workflow Publishing Forms (Public Links) Options: Notes on Externally Filled Forms Licensing Technical Details and Their Ramifications HTML, PDF, and Renderings Performance Considerations Modifying a Form Template Splitting and Merging... 30

5 Introduction to Forms What are Forms? A form is a special type of document whose content is a combination of a form template and data filled in by a user (or users) or by automated processes. The form template is created using the DocStar Form Designer. Form documents are created from form templates. When in Form Edit mode, they can be filled in by a user with permission to do so. When not in edit mode, they look like regular documents. Form documents can be printed or ed, etc. (subject to permissions). They can also participate in versioning and workflow and any other process. All features shown in this guide are based on having version or newer of DocStar ECM. Why Forms? Forms allow user input and other metadata to be reflected in a document s content, and thereby be visible when the document is viewed, printed, ed, or downloaded. Filling in a well-designed form can be much more intuitive than filling in fields in the Content Fields panel in DocStar. The form layout can include instructions, validation, and other features to guide users through entering data. Data captured via a form are stored in DocStar Content Fields and thereby are readily available to Workflow. In contrast, one could submit PDF or other documents that have been filled in prior to capture by DocStar, but the data in such documents would then have to be extracted and parsed using OCR or other means. Finally, Public Links to forms allow them to be completed via the web by people who are not otherwise DocStar users. 1 January 31, 2018

6 A Practical Example One example of a form is the Time Off Request. It is filled out by any employee who requests vacation or other time off. The form captures the desired dates and other data. Workflow routes the form through one or more approvals notifying the employee at certain, key steps in the process. This is the Time Off Request form in the Form Designer in DocStar. The form layout is shown on the working area, or canvas, on the right. Tools and options for modifying the form are on the left. A navigator is on the far left. Near the top of the tools area, note that the Content Type of the form is shown. This Content Type is applied to each newly created form, or instance, of the Timeoff Request and determines its default fields, workflow, and security class. Controls for creating and navigating among parts of a multi-part form appear above the canvas, below the form name. Multipart forms are discussed below. The Employee Information section of the Time Off Request contains eight elements or fields, which identify the employee and his or her division, department, and supervisor. The Requested Time Off section contains a field group element, which allows one or more date ranges to be specified on a single form. 2 January 31, 2018

7 Forms Navigator The navigation area, on the left, shows a tree of categories. Every form template must specify a category, which helps organize forms. Clicking on the Categories node shows all available form templates. Clicking on a specific category shows form templates of that category. In both cases, the Blank Form Template, from which new ones are created, is also shown. Note the icons: Edit this form template. Click this icon to create a new form template or modify an existing one. To modify, select the current template, edit it, and Save. To create a new one, select Blank Form Template (to start from scratch) or a similar, existing form template. Then click Save As and give the form template a new name. Create a new form document from this template. It may take several seconds to create the form document, after which it is opened in Form Edit mode in the viewer. Users may also double click on a form to create a new form document. Creates a public link for a form. See Publishing Forms, below. Deletes the form template. When a form template is deleted, any form documents that had been created from it cease to behave as forms, but they remain valid documents. Clicking directly on a specific form in the navigator edits it, just as though you had clicked on its category and then hit the pencil icon. 3 January 31, 2018

8 Designing a Form Most of form design involves selecting elements from the tools area and dragging them onto the canvas. There are also a few options that are independent of specific elements. This section covers all of the options and elements available in the form designer. Content Type The Content Type selected in the form designer designates the Content Type of each instance of the form. Thereby, it determines which fields are most readily available, what workflow is applied, etc. You may choose an appropriate, existing Content Type or create a new one through the Content Type Builder, which is accessible here. 4 January 31, 2018

9 Basic Elements Elements are the basic building block of a form. Generally, an element includes a label and an input. Most form elements are tied to fields (standard fields, like Title and Keywords, or user-defined content fields). The element displays the current value (if any) of the field and allows it to be edited (except for read-only fields, like Created On, of course.) The field associated with an element is referred to as its Field Map. Fields associated with form elements can be viewed and modified on the form (in edit mode). They can also be edited in the Content Fields panel, via workflow, or via row or column edits in a results list. To add elements to a form, click on the Add Elements tab, then click an element and drag it to the canvas. Settings The Display Label checkbox determines if elements will be added with or without a label. If you change your mind about the label after placing an element, you can do so through the Element Options tab explained below. Choosing an Element Note that there are four accordions from which elements may be selected: 5 January 31, 2018

10 Content Type Fields For convenience, fields that are among the selected Content Type s default fields are listed in their own accordion. When elements are placed from this collection, the label (if desired) and the field map are predetermined, matching the field. You can modify either the label or the field map after placing the element. Form Elements This category includes standard fields (like Title and Status) for which, like Content Type fields, the label and field map are predetermined. It also includes generic elements, like Text Box and Dropdown, for which a dialog box opens as the element is placed to select (or create) a field to which the element will map. It also includes special elements, like File Upload and Link. All of the Form Elements are detailed below. Field Groups Field groups defined in DocStar are listed here, allowing you to drag any field groups into the form. See Field Groups below for more information on designing forms with field groups. Customized Form Elements Customized Form Elements include all user-defined fields, whether or not they are among those selected in the Content Type. These are placed with a predefined field map and can be labeled if the user desires. Dragging and Selecting Elements Once placed on a form, you can drag an element to change its position. Clicking on an element selects it. Depending on where you click, you may select the label, the input (text box, combo box, etc.) or the element container, which includes both. Some elements don t allow independent selection of the input or container, as detailed below. This is a Text Box element whose label is selected. As indicated by the resize handles, only the right and bottom edges of the label can be resized. As the label is enlarged, the overall size of the element is increased and the input is moved to accommodate. This is the same element with its input selected. Once again, as indicated by the handles, only the right and bottom edges can be resized. To move the input to the left, select the label and make it narrower. In order to select the element s container, you have to click on some place other than the label or the input, such as its border. The container may be resized in any or all directions. 6 January 31, 2018

11 Regardless of which part of the element is selected, the Element Options tab is displayed. These options are defined below. Element Options The element options tab allows various properties of an element to be changed. Depending on the type of element selected, some or all of the following will be available. Field Map The field map ties the element to a content field, so that the form displays and edits that field. Depending on the type of element, your choice of fields may be restricted to a specific type. Some elements are predefined to work with a single field, so there are no other choices. The pencil icon ( ) lets you modify the definition of a field and the plus icon ( ) lets you create a new field. Creating or modifying a field here has the same effect as doing so on the Fields Admin page. Copy and Paste Clicking the copy icon ( ) while one or more form fields are selected allows you to copy it. The Paste icon ( ) allows you to paste the copies. Control-C and Control-V may also be used as shortcut keys. Regarding selecting multiple items, this may be done by clicking and dragging over the desired elements or holding the control key to select additional fields. Holding the shift key and clicking will select all elements in the specified range. Label and Value Properties Optionally, a label is shown next to each element. The label text, font, color, and style can be modified. More advanced formatting options are available using CSS, discussed below. Value properties exist for most elements to adjust how a field value is displayed. A predefined value (default value) can often be set; as can Help Text, which is displayed when the user filling out the form hovers the mouse over the element. If using a Field that appears on multiple pages, clicking the Synchronize Value checkbox will result in that value being carried over across multiple form parts once a save operation has been performed on the form. Note that the Synchronize Value check box must be checked on each instance. Help Text You may specify help text on form elements. If a user hovers over the form element, the text you enter here will be displayed as a tooltip. 7 January 31, 2018

12 Synchronize Value If you have a form value which appears on more than one page, clicking this box on each appearance will set the value to appear again on that subsequent instance. For example, if the user filling out the form needs to add their name, you can have them enter it on the first page and synchronize that value on pages 1 and 2 so that value appears again without the need for them to re-enter it. Formula A formula allows the value of a numeric element to be computed using basic arithmetic from other numeric elements on the form. By default, the Formulas accordion shows the current formula if any defined for the element. Clicking the pencil icon within the accordion enters formula edit mode. In formula edit mode, much of the form designer is disabled. A formula is created by clicking on the numeric elements on the form and by clicking on the virtual keypad, which includes arithmetic operators, digits, and parenthesis. For instance, to make a formula that is the product of two elements, like Quantity times Unit Price, click on the Quantity element, then X, and then Unit Price. The summation (Σ, or sigma) symbol is used to sum all values of a field group element, such as to generate a total amount from a collection of line item amounts. As the formula is built, messages will explain what may be added next, and the buttons will be enabled and disabled accordingly. DEL deletes the last entry made to the formula. C clears the formula. Clicking the save icon exits formula edit mode retaining your current formula. The cancel icon exits formula edit mode and abandons changes you ve just made. 8 January 31, 2018

13 Field Groups and Formulas Field group elements (discussed below) may be computed from other elements in the field group, in which case the formula refers to values in the same field set (row). Thus, as in the Quantity times Unit Price example above, an Extended Amount can be computed for each line item. Field Group elements that are computed from elements outside the field group refer only to the first value (if there are multiple values) of the field. Any element may compute the sum of an element within any field group. 9 January 31, 2018

14 Advanced The Advanced accordion offers these features, subject to licensing. See Licensing, below. The Render As Text option determines how an element on the form will look when it is not in edit mode, which includes viewing in DocStar with Form Edit mode off and when printing, ing, or saving a copy. When rendered as text, elements will not look like a form input element: they will not have a border, dropdown indicator, date picker, etc. The File Upload element is hidden entirely when rendered as text. CSS (Cascading Style Sheets) allow advanced formatting to be applied to forms. Class names can also be used in Javascript selectors for various types of automation. For most elements, CSS class names may be specified individually for the label, value, and the container. Multiple class names, separated by spaces, may be applied to each. See Javascript and CSS under Form Options, below. Group Settings and a Delete Group button appear here only for elements that are members of a field group. Field Groups Field groups are composite elements made of the following: An overall container for the group. An element for each field in the group; each of these includes a container, a label, and a value. A delete set icon. An add set icon. In form edit mode, users can enter multiple sets of values (rows or line items) into a field group element, and it grows to accommodate the additional data. Different parts of the field group element can be selected individually, and options available vary with the selection. Let s look at an example from the Time Off Request. The text, Requested Time Off, at the top and the four column headings below it are actually Label elements independent of the field group. The field group itself is just this: 10 January 31, 2018

15 The type of each member element (i.e. Dropdown, Date) is determined automatically by the type of the mapped field. Selecting any of the member elements shows its Element Options similar to those shown for elements that are outside of a field group. Note that the label has been hidden for each of these, because one set of the independent labels above the field group was preferred to including labels on each row. Group Settings When any part of the field group is selected, these Group Settings are displayed. The repeat direction determines where the second, third, etc. field set will appear on the form. Generally, field groups are repeated vertically so that each new set appears as a new row. One reason to repeat a field set horizontally might be to display two address blocks (i.e. Billing and Shipping) side by side on a form. Spacing is the distance in pixels between field sets. Min Count is the minimum number of field set elements shown, even when there are fewer sets of data in the field set. For instance, if the Min Count is 5, then a new form will show 5 sets of inputs even if no data have been entered yet. To see the effect of Repeat Direction and Spacing in the designer, change the Min Count to 2 or more. The effect of Max Per Page varies depending on the Layout Mode set in Advanced Form Options. In Grid mode, it determines how many sets (rows) may appear before a page break is automatically inserted, moving the remaining rows and all elements below the field group to the next page. In Flow mode, when the maximum number of sets is exceeded, elements below the field group simply shift downward no page break is added. Sort By determines the order of the field sets on the form. The Field Group Controls The Add and Delete icons included in the field group element can each be selected. They may be moved relative to the other elements within the field group. Although various Label and Value properties are displayed, none of them are applied in Form Edit mode (at this time.) Note that clicking them doesn t add or delete anything here in the form designer; these icons just represent the buttons that users will click to add and delete field sets when filling out a form. 11 January 31, 2018

16 Form Element Details Now that selecting elements, element options, and field groups have been discussed, the elements found in the Form Elements accordion can be reviewed in detail. Text Box This is a text box input with optional label. A dialog box requires you to choose the field to which it will be mapped when you place the element. You may select any existing field or create one. Note that sometimes a text box is not a text box. If the mapped field is augmented by a type ahead or dropdown Datalink through the Content Type, then an input element matching the Datalink is used instead of an actual text box. Label The label element is just a label. It has no associated input or field map, and the label is not in a container. It is used to display static text, like instructions, on a form. Multiple Choice This element includes an optional overall label and a set of radio buttons, each with individual labels and values. When presented to a user, he or she may select any one of the options. The field chooser dialog appears when this element is placed, through which a field is mapped. The value specified here in the form designer corresponding to the selected choice is stored in the mapped field at run time. The labels are displayed next to each radio button in the form. In many cases, the values will differ from the labels. For instance, you may show options with user-friendly descriptive labels but store abbreviated or numeric values, which are more conveniently processed in workflow. Initially, the element includes three choices, each with a label and a value. 12 January 31, 2018

17 The label is displayed on the form, and the value is stored in the mapped field. All values therefore must be compatible with the field type: i.e. you can t store, text in a Date field. You can remove or add choices with the and symbols, respectively. Clicking a radio button in the Value accordion designates the default selection. The Field Layout selection allows you to arrange the choices Side by Side (horizontally) instead of in one column (vertically), as shown here. Note that only the label of this element may be resized. The individual choices are automatically sized to their respective labels, and the element container is automatically sized to its content. Thus, you cannot select the container or each option individually. True/False The true/false element must be mapped to a Boolean field. It appears on the form as a checkbox with (optional) label. 13 January 31, 2018

18 The Predefined Value is the default state of the checkbox when a new form instance is created. The Help Text is displayed as a tooltip when the user moves the mouse over the element. Checkboxes The Checkboxes element is similar to the Multiple Choice element in many respects. It must be mapped to a field. It combines an optional master label with a collection of input elements with individual labels and values. There are initially three checkboxes, but you may add or delete. All of the values must be compatible with the type of the mapped field. One Column and Side by Side layouts are available. No part of the element can be resized except for its master label, so the container and the individual choices cannot be selected. In this example, the mapped field is an Integer so the default values are all integers. 14 January 31, 2018

19 The distinction between Checkboxes and Multiple Choice is that the former is not restricted to one selection; the user may check none, one, two or all of the checkboxes. When no box is checked, no value at all is stored for the mapped field. When multiple boxes are checked, multiple values are stored for the field. Thus, in the example above, if a user checks Phone and , two distinct values (1 and 4) are stored for the mapped field. Workflow designers partial to bitifield operations can combine integer or long checkbox values into a single field using the Sum operation in the Aggregate Task. If doing so, ensure that only powers of 2 (i.e. 1, 2, 4, 8, 16, 32, etc.) are used as individual values. 15 January 31, 2018

20 Dropdown The Dropdown element is a label and a dropdown input (a Select element in HTML). The dropdown must be mapped to a List type field. The choices displayed are driven by the specified list. Like the Text Box, if the mapped field is set to use a dropdown or type ahead DataLink via the Content Type, then the DataLink determines the choices and the type of input element displayed. Section Break The section break is a horizontal line optionally with a label above it. It has no field map and no input. It may be resized as desired. If expanded vertically, it will appear as a rectangular box rather than a line. Name The Name element is a short-cut for creating a field group, called Name, which includes two text fields called First Name and Last Name, and then placing that field group element onto the form. It is the equivalent of creating the two fields manually on the Fields admin page, then creating the Field Group, and placing it. If the field group already exists, it just places the element. Address Similar to Name, this is a short-cut for creating a field group (if it doesn t already exist) and placing it on the form. The Address field group has the six text fields shown here, arranged (by default) as shown below. 16 January 31, 2018

21 Title This element is simply a Text Box pre-configured for the standard Title field. Keywords This element is a multiline Text Box (a TextArea in HTML) pre-configured for the standard Keywords field. Status This element is pre-configured for the Status field, which is designed to capture Verify Field Group Task results from Workflow. (Status may be set with other workflow tasks, too.) The element includes a label, which may be hidden, and a value area that will render basic HTML markup, such as a bulleted list. One of the Settings in the Verify Field Group Task allows the result to be formatted with HTML, and this is how such a result is displayed in a form. When selected, only the label is resizable. The width of the container will adjust to the width of the label, and at runtime, the height of the container will adjust to the value of the Status field. Number Similar to the Text Box element, the Number element prompts for a field to which it will map. The field must be a numeric type (Decimal, Integer, or Long). This variation of the Text Box element is labeled, as a convenience when placing this commonly used input on a form. Website This is another Text Box variation with an alternate label. 17 January 31, 2018

22 Link A hyperlink can be placed in a form, allowing form creators to link to another web element. Phone Likewise, this is a Text Box variation with an alternate label. Date Like Number, this is a specialized input element. A Date field must be mapped to it. A date picker will be available when a user is filling in this element on a form document. Date/Time Like Date, except that it maps to Date/Time fields and provides a date/time picker. ComboBox Like the Dropdown element, the ComboBox is a label and a list-driven input, and it must be mapped to a List type field. A user may choose from the list or enter their own value, ignoring the choices. Like Text Box and Dropdown elements, the behavior of the ComboBox changes when the mapped field is driven by a type ahead or dropdown DataLink. The DataLink determines the type of input element displayed and the choices available therein. Image Use the image element to include a logo or other picture on the form. It is not mapped to a field. Rather, an image must be specified here in the designer. You can choose an image previously uploaded or upload a PNG or JPEG file. The element can be resized and the image will be stretched to fit it. Be mindful of aspect ratio; you don t want logos or other images to appear too tall or short. File Upload Add this element to allow form-fillers to add additional content to a form, such as receipts to an expense report. When a user fills in the form, the File Upload element will initially have one Choose File button. If a file is selected, another appears, allowing multiple files to be uploaded (attached) to the form in one operation. The file(s) are uploaded when the form is saved and are added as additonal content items to the end of the document. 18 January 31, 2018

23 Note that after saving the form, the name(s) of the files will no longer appear in the File Upload. Further, attached content will not appear when the form is in Form Edit mode. The attached files will be visible when the user leaves Form Edit mode. Attached content is queued for rendering, so that in most cases, it can be viewed in the DocStar image viewer after a short period of time. See Technical Details at the end of this guide for more information on content items and forms. Created On The Created On element is preconfigured to display the Created On property. 19 January 31, 2018

24 Form Options Form options include the following settings which apply to the whole form. General Security Class determines permissions to the form template itself, not documents generated from it. Form documents have their own security class initially determined by the form s Content Type. The Category determines where this form appears in the forms navigator. Name is the name of the form template and also the initial title of any form documents created from it. Description is a field for the form designer to leave notes regarding the design choices and function of the form. This can be useful when developing a new version of a form. Page Size and Orientation determine how the form is presented both in and out of Form Edit mode. Start As Draft, if checked, will cause each form document created from this template to start out as a draft version, similar to documents that are imported as drafts. Display Grid and Snap To Grid features aid in aligning elements in the form designer. Displaying the grid helps you see when items are aligned. Snap to grid forces items to line up on a grid; the unit is a pixel. Public links can be created to publish forms for non-docstar users to fill out. This is discussed below. Autosaving the public link version of the form is disabled by default. 20 January 31, 2018

25 Field Settings Forms designers can specify if changes made to particular fields can invalidate an approval. For each field on a form, a checkbox is present which allows the designer to choose whether or not modifications to particular fields will reset the status of the approval on the form. For example, if a purchase order requisition form is used and the quantity is changed after a manager approves it, you may want to ensure that approvals are invalidated, but if the description is changed, it s not as important. Advanced Forms include the following options in the Advanced accordion. Some of these features are dependent on licensing. See Licensing, below. Save Button As with other content items in DocStar, a Save operation can preserve changes to made fields without moving the content item forward in Workflow. To simplify the process and avoid confusion for external users who may not understand the difference between Save and Submit, forms designers can choose to omit showing the save button on the Form itself. Internal users will still see the save button in the save button in the metadata panel. Submit Button When a user fills out a form, a Submit button (as well as an optional Save button) is present. The meaning of this button, the label it displays, and the message displayed after clicking it can all be modified here. Submit can Complete the form. A completed form will no longer be viewed in Form Edit mode or modified. Submit can issue the Submit command to the workflow panel, assuming the document is at a user input action in workflow. Enable this option when the form includes all inputs required for workflow to progress. Defer Workflow If unchecked, workflow will be executed immediately on the creation of the form. When this box is checked, this prevents the workflow from executing until the document has been submitted by the user. This setting may be 21 January 31, 2018

26 desirable if you are creating public links or relying on user data for automatic tasks, such as creating a title, adding to a folder, or routing. Checking this box will ensure that only completed forms reach the workflow queue. Layout The alignment of the Save and Submit button can be modified through the Button Alignment options. Multipart forms (discussed below) will have additional buttons to navigate among form parts. The Flow and Grid layout modes affect interpretation of the Max Per Page option of all field groups on the form. In Grid mode, a page break is added when any field group contains more sets than its Max Per Page. In Flow mode, elements flow downward to accommodate the field group but no page break is added. Tab Order determines the order in which focus moves from element to element when hitting the Tab key. Clicking the pencil icon opens the Tab Order Editor dialog. All elements which can accept focus (input) are listed; this excludes labels, images, and section breaks. Drag an element up or down to change its Tab Order. Click the icon to disable the tab stop on an element. The element will still be visible and functional, but pressing the Tab key will never stop there; a user will have to click on it. Clicking OK and Cancel, of course, close the dialog accepting or discarding any changes made, respectively. Reset enables tab stops on all elements and reorders them from top to bottom, left to right. JavaScript JavaScript may be used to provide advanced functionality. Click the icon to open the JavaScript editor. 22 January 31, 2018

27 Your script executes each time an instance of your form is loaded in Form Edit mode. It may contain essentially any valid JavaScript as well as jquery library features, accessible with the $ factory method or $. predefined functions. Things you can do with JavaScript in your form include, but are not limited to: Hide or show elements or otherwise alter their appearance. Typically this would be based on data present in the document or entered in other elements. Provide validation on data entered in the form. That is, report if a part number doesn t match a required format. Calculate the value of elements based on other data in ways beyond those provided by the Formula feature. Integrate with other systems through web services. Implement a Space Wars game. Really. This is possible. Unfortunately, it is also possible through a bad script to create bugs that impair the operation of your form or DocStar. Therefore, JavaScript should be used cautiously. 23 January 31, 2018

28 DocStar recommends that you use the following objects and methods, which are provided for form script developers. $form is a JavaScript selector which contains the whole form. Selecting elements within $form with the.find() method using their type, name, and/or class name(s) (specified for each element in the Element Options tab s Advanced accordion) is the recommended practice to ensure your script affects your form and no other parts of DocStar. Check online resources for help defining jquery selectors. The custom.changeval() and.changechecked() methods may be applied to elements to change their values and fire their change events. Use.changeChecked() on check boxes and radio buttons and.changeval() on everything else. window.formcleanup helps manage removal of event handlers, timers, and intervals when the form unloads. Push any settimeout() and setinterval() functions you use onto their respective arrays in formcleanup. Likewise, define the unbindfunction in formcleanup so that it removes all event bindings you ve created; this is facilitated by including a namespace (like.form ) on all of your events. Failure to remove timers and unbind events will cause DocStar to become slower and slower over time as forms are processed. The comment blocks included in the JavaScript of each new form provides further details. Render with JavaScript By default, the form s JavaScript is executed only when it is viewed in Form Edit mode. This is suitable for anything that provides validation. However, scripts that affect the appearance of the form will not be reflected outside Form Edit mode unless this option is checked. Rendering the form with JavaScript allows appearance changes made by JavaScript to be reflected in the standard viewer and when the form document is printed, ed, or downloaded. CSS Layout CSS Layout may be used to alter the appearance of elements based on their type, relationship to other elements, and/or on CSS class names applied to them through Element Options. For instance, the Time Off Request form used as an example in this document applies a few lines of CSS to orient the labels of all elements above their values rather than to their left. div, span, input, select, textarea, img { vertical-align : middle; z-index : 0; }.formelementlabel { display : block; white-space : pre; vertical-align : middle; } 24 January 31, 2018

29 Multi-Part Forms A single form part may span multiple pages, but each form part always begins on a new page. Thus, one reason to use multipart forms is to control pagination. Moreover, a multipart form document may be split, creating separate form documents. See Splitting, below. This supports a process in which different workflows are to be applied in parallel. Note that elements tied to the same fields may appear in multiple parts of a form, so that a user would only have to fill them in once. Then, when the form is split, both (all) parts contain these data. To add a second part to a form template, click the Insert button above the canvas. Doing so will add a new, empty form part after the current form part, changing the navigation bar thus: The plus symbol also adds a form part, but adds it to the end of the form. The x symbol deletes the current form part. The bookmark for each form part may be altered. When an instance of this form is viewed (in Form Edit mode or otherwise), the bookmarks may be used to navigate among parts. You may want to consider using the Synchronize Values function when building a mult-part form. 25 January 31, 2018

30 Workflow It is not essential that a form take part in a workflow, but it is fully supported and very valuable. Workflow allows parts of a form to be filled in and/or validated automatically using math operations, Datalinks, etc. Any workflow tasks can be used on forms, but some are particularly useful with forms. Display Message Task allows you to specify a region, which will be highlighted on the document. Thus a user can be prompted to fill in part of a form and be guided to the correct spot. Math Task can operate on individual fields or a field group, and it can perform some operations like date arithmetic that are not available via a Formula on a form. Aggregate Math Task computes sums and other aggregate functions on multi-valued inputs. (A Formula is limited to computing a sum on a field group element.) Set Field Group Values populates a row or rows in a field group drawing from any types of inputs. There is also the Complete Form Task. 26 January 31, 2018

31 Publishing Forms (Public Links) Creating a public link for a form allows an instance of the form to be completed by someone who isn t a DocStar user. A link can be created from the form designer though this button in the Form Options tab. Note that specific licensing is required for public links, as described below. Also, you can click the link icon shown on each form representation in the navigator. Either way, you ll be presented with this dialog. Through this dialog, the form designer creates a link (a URL), which may be ed from here. Alternately, the link may be copied from the dialog and pasted into another webpage, which becomes a custom front end for inviting people to fill out a form. 27 January 31, 2018

32 Options: Recaptcha is an option, available on DocStar hosted systems, to prevent bots from filling in forms. When checked, DocStar delivers a web page containing the Google recaptcha widget, and the user must satisfy it before accessing the External Form Filler. This is what the widget typically looks like to a user. Generally, a user need only check the box to indicate that they are human. In some cases, it is also necessary to identify which of several images match a description. Display Meta Panel the external form filler is based on the DocStar document viewer. Optionally, it may include the metadata panel, including all content fields, but without Approvals, Workflow, and certain other features. If omitted, the user will only see the form. Use DocStar Layout unchecking this option will hide the DocStar branding and navigation buttons. Expiration optionally, the link created hereby will cease to function after a specified number of uses or after a specified date. When someone uses the link, he or she creates a new form document and opens it in the External Form Filler. It functions like Form edit mode in DocStar. A form may be partially filled in and saved. The user can reuse the original link on the same computer a cookie is used to identify the partially-completed form to finish filling in the form later. (Without this cookie, the link would create another new form.) Alternately, the user may bookmark the form while filling it in. This bookmark identifies the form and can be used from another device. (This is a different URL than the one originally created when the form was published.) Notes on Externally Filled Forms All activities (creating the document, saving, etc.) performed in the external form filler are done using the credentials of whomever created the link. Likewise, they are audited to that user, although the description in each audit will indicate that it was performed by an external user. Until they are submitted, they are regarded as temporary documents. As such, they are not indexed and thus cannot be found via search. Furthermore, they will automatically be deleted if not made permanent within a set period of time (14 days by default). When submitted, the form becomes a permanent document. If the link had been created with a limited number of uses, this count is decremented at this time. 28 January 31, 2018

33 Licensing The Forms license unlocks the forms tab and the ability to design and use forms. The Forms, Advanced license is required for these features in the designer: Advanced accordion within the Element Options tab. JavaScript and CSS Layout in Form Options. Published Forms (Pay per Use) licenses are required to create public links. The number available is reduced by one when a user submits the form. Technical Details and Their Ramifications The following details regarding the DocStar implementation of forms can help form developers achieve greater functionality and performance. HTML, PDF, and Renderings Fundamentally, each DocStar form is an HTML document (web page). The various inputs and labels are all HTML elements. This allows them to be viewed and filled in with any browser, and this is what allows them to be formatted and manipulated using CSS and JavaScript. For all operations except Form Edit mode, a PDF file is generated from this HTML. Additionally, a single PDF is generated for each form part. This PDF is regenerated immediately by DocStar whenever a change to a content field, which appears on the form, occurs. This is true if the change is made in Form Edit mode or anywhere else in DocStar, including via workflow. The exception to this is a completed form; the PDF content ceases to be updated once the form is completed. Whenever the PDF representation of a form part is changed, the corresponding renderings change, too. Performance Considerations Due to the work required to update the PDF representation and renderings, which is performed directly not through the distributed queue there can be a noticeable delay when making a minor change to data on a complex form document. Form and workflow designers can minimize re-rendering time (i.e. improve performance) by following these guidelines: For large, complex forms, separate the form elements into multiple form parts, and avoid including the same field (unless it is unlikely to change) on multiple parts. Thereby, each change will typically affect only one part, and DocStar will only re-render the part(s) affected by the change. Workflows that operate on form data should combine multiple tasks into a single action whenever possible. A save occurs after each action, and each save will re-render affected form parts. In general not just in Forms a workflow with fewer/bigger actions is more efficient than one with more/smaller ones; this difference is more significant with forms due to the re-rendering that occurs. 29 January 31, 2018

34 Modifying a Form Template Form designers may need to consider the impact of modifying a form template when there are already forms based on that template in use. First, any completed forms are unaffected. Their PDF representation and renderings no longer change. Also, there is no immediate impact on any uncompleted forms. Their PDF representations and renderings won t change until (unless) a field that is used on the form is modified. When modified, these documents will be rerendered using the new form template. Thus, there may be a period of time in which changes to a form template seem to trickle out to active forms, as they are processed. Finally, Form Edit mode always uses the latest form template to display the form. Splitting and Merging Technically, each form part defines a distinct content item. Consequently, a form document may be split between form parts, and each of the resulting documents is itself a form document. Splitting forms is discussed above under Multipart Forms. In contrast, if one were to split a document within a form part, this would require bursting that content item, and thereafter it would no longer be editable as a form. The order of form parts and non-form content, which has been added to a form document, can be rearranged via the document thumbnails view. Each part will operate normally even though they are no longer in their original order. It is also possible to merge parts of two different forms into the same document, although this is not a recommended practice. Each form part will operate according to its respective template. 30 January 31, 2018

35 About DocStar Helping businesses translate vision into action for more than 20 years, DocStar delivers a flexible and innovative enterprise content management and process automation platform. Easy to implement and use both in the cloud and on premises DocStar proven technology and global process expertise empowers organizations to operate at peak performance, navigate change, and grow x2735 info@docstar.com