Creating and configuring a custom document form

The form builder allows editing forms of documents and other objects. You can add panels, tabs, columns, and make fields required. You can also add you Razor markup. It may be useful if you want to create a unique, complex and convenient form.

To edit a document form, open the Document Management tab in the Designer, select a document type and switch to the Forms (views) tab. Any document type has three forms: for editing, creating and viewing.

Fig. 1. Forms (views) tab

When you click on the editing icon next to the required form, the form builder opens.

Fig. 2. Form builder

In fig. 2 you can see:

The current document form.
A panel with all the document properties that can be added to the form. Properties can be added to the form with drag-and-drop.
Toolbar. It contains various elements that you can add to the form.

Fig. 3. Form builder toolbar

Fig. 3 shows the toolbar. If you click Form Settings you can edit the form parameters and add a script that will be executed when loading the form. From the elements panel you can add the elements to the form:

Column allows placing data in a column. You can place several columns on the form.
String allows placing data as a string.
Panel allows grouping various attributes on the form. A panel can be collapsed and expanded.
Tab allows placing data in tabs.
Text allows placing a text on the document form. The text will be uneditable in the web application.

As an example, we will use a car insurance document. Which has the following attributes:

Full Name
Model
Year of manufacture
Traveled Kilometers
Type
Insurance cost

Let's edit the form using the form builder.

View form.

Fig. 4. First tab

Fig. 5. Second tab

Fig. 4 and 5 show two tabs of the document view form. The tabs are added using the Tab element.

Let's take a closer look at the process of editing a form.

Fig. 6. Custom document attributes

Fig. 6 shows a panel, which by default displays all the document attributes, added by a user. If you need to change their order or display, remove this panel and create a new one.

Change the order in which the attributes will be displayed on the document form. Drag the Tab element to the required place on the form. It will look like this:

Fig. 7. Empty tab element

To create tabs, click on the green plus icon (fig. 7). In the opened dialog box, enter the tab name.

Fig. 8. Tab settings

Fig. 9. Created tabs

Fig. 9 shows the created tabs. You can add attributes from the side panel to the tabs. To delete a tab or any other element, use the context menu (fig. 10).

Fig. 10. Deleting a tab

2. Editing form.

Let's take a look at the Panel and Column elements taking the editing form as an example.

Fig. 11. Panel element settings

Fig. 11 shows the settings of the Panel element. You can specify the panel header, make the panel collapsible and set its default state. The Keep collapsed setting defines whether the system will remember the state of the panel when the form was opened the last time. In the Style field, you can set the appearance of the element.

Fig. 12. Example of using the Column element

Fig. 12 features an empty column.

Fig. 13. Panel containing various elements

Fig. 13 shows a panel, which contains several elements, such as columns and attributes. The panel is collapsible. All the fields are divided into two columns. The highlighted text is created using the Text element. This tool adds an uneditable text to the form. It can take up one or several lines.

Fig. 14. Required fields

You can make fields on the form required (fig. 14). Open the settings by right-clicking on the element and selecting Settings.

Fig. 15. Field settings

Checking the Required box makes the field required on the form. The Read only setting forbids editing the field. In the Name on Form field, you can specify a name that will be displayed on the form. It may be different from the field name. In the Description field you can add a field description.

On the Advanced tab (fig. 16), you can add a script that will be executed when changing the field value.

Fig. 16. Field settings, Advanced tab

These are the main tools of the form builder. In case they are insufficient, and you need to, for example, change the width of a field, you can use Razor markup. Open the settings of an element on the form and specify the path to a markup file. Fig. 17 shows an example of the Panel element settings.

Fig. 17. System tab of the Panel settings window

In the Razor Form field (fig. 17) specify the path to a markup file. It must be located in the …/UserConfig/WebApplication/Modules/…. folder. The "\" characters in the path (used in Windows) must be replaced with "/".

Make sure that the folder WebApplication/Modules/… is in the configuration folder that is connected to the server. You can check it in the connection.config file, which is located in the folder ELMA3-[Edition]\Web. The path to the folder with the configuration.config file is specified in it. Add the folder WebApplication/Modules/… to this folder

Relative path means that everything before /Modules is replaced with "~". I.e. a path starts with ~/Modules/.

The path to a file with user markup depends on the location of the main (system) markup file, that you are going to edit. The markup you are going to use to change the form augments or partially replaces the system markup, that is why it is located in a similar path.

Since you need a path to a system file, find it in the folder Web/Modules. Then copy the path and create a similar folder structure in the folder WebApplication/Modules/…, located in the configuration folder.

A path to a user markup file can have the following structures, on which the relative path depends. It is specified in the Designer, that the system connected the markup file.

1) If the path to the file does not contain the Shared folder, then full version is specified ~/Modules/(all the other nested folders)/FileNameDifferentFromTheDefaultName.cshtml.

2) If the original file is located in the Shared folder, then you don't have to start the path with ~/Modules/, you can use a relative path to the …/Shared/… folder and specify the file extension at the end. ~/(all the folders inside Shared)/FileNameDifferentFromTheDefaultName.

The markup file name must be different from the system file name. If you need to change several document forms or several elements on one form, then you need to create several files with different names, but you can place them in one folder. If names match, the system will use one of them, according to its internal parameters.

3) You can store all the user markup files in the folder \UserConfig\WebApplication\Views\MarkupFileName.cshtml and in the Designer specify the path ~/Views/MarkupFileName

This way you can change not only document forms, but all the system objects, for which the form builder is available, such as contractor page and task form.

Let's take a look at an example.

The path to a user markup file:

…/UserConfig/WebApplication/Modules/EleWise.ELMA.Documents.Web/Views/Shared/Document/EditDocumentFormPanel.cshtml – system path. In the Designer you can specify it like this:

Fig. 18. Example of a path to a user markup file

or use a relative path ~/ Document/EditDocumentFormPanel.cshtml. If you place the file EditDocumentFormPanel.cshtml in the folder \UserConfig\WebApplication\Views\, then you can specify ~/Views/EditDocumentFormPanel.cshtml.

In the fig. 19 you can see an example of a form changed with a user markup.

Fig. 19. Form with custom markup

Below is the markup used in fig. 19.

The following formatting parameters are used in the markup:

margin and interval are defined by the "margin: 10px;" parameter;
the width of the fields is defined by the "width: 100px;" parameter;
the structure "@using (var data = new ObjectViewData(this))" allows getting access to edit the fields of the document created earlier;
all the fields are placed in rows and columns of a table (tags <tr> <td> </td> </tr>).

@using (var data = new ObjectViewData(this))// connect the object with the information about the document
{// Razor markup is specified inside the braces
 <tr> // Table row
    <td>// Table data
    <div style="float:left; width: 300px;">// specify the block formatting 
    @Html.Caption("FullName", a => { a.Container("div");})// Add the FullName field header in a div unit
    @Html.EditorOrDisplay("FullName", a => { a.Container("div");}) // Add the FullName field itself
    </div>
  </td>
</tr> // Close the tags
<tr>// Second row with several fields.  
  <td>
    <div style="float:left; width: 100px; margin: 10px;">
      @Html.Caption("Model", a => { a.Container("div");})
      @Html.EditorOrDisplay("Model", a => { a.Container("div");})
    </div>
    <div style="float:left; width: 100px; margin: 10px;">
      @Html.Caption("DOM", a => { a.Container("div");})
      @Html.EditorOrDisplay("DOM", a => { a.Container("div");})
    </div>
    <div style="float:left; width: 100px; margin: 10px;">
      @Html.Caption("TravKm", a => { a.Container("div");})
      @Html.EditorOrDisplay("TravKm", a => { a.Container("div");})
    </div>
  </td>
</tr>
<tr>// third row 
  <td>    
    <div style="float:left; width: 100px; margin: 3px;">
      @Html.Caption("Type", a => { a.Container("div");})
      @Html.EditorOrDisplay("Type", a => { a.Container("div");})
    </div>
  </td>
</tr>
<tr>//last row
  <td>    
    <div style="float:left; width: 100px; margin: 3px;">
      @Html.Caption("InsuranceCost", a => { a.Container("div");})
      @Html.EditorOrDisplay("InsuranceCost", a => { a.Container("div");})
    </div>
  </td>
</tr> 
}