Forms
WorkZone Process forms are based on HTML and JavaScript, which are well-known domains allowing a large degree of flexibility.
The basic concept is that a central form can be displayed on all clients using the WorkZone container interface, which is by default supported by WorkZone for Office and WorkZone Client.
As a minimum, a form consists of a view and a controller. The view is the visual part of the form displayed in WorkZone Process, which is configured in HTML using a set of basis controls. The controller contains the validation and business logic of the form, which is implemented in JavaScript.
Modeling of forms requires basic understanding of HTML and Javascript as well as the JavaScript libraries Angular, JQuery and WorkZone Process Basis library.
Form view
You can configure views using simple HTML elements defined in Basis.js.
Example: Submission Basis is a standard part of WorkZone Process.
<!doctype html>
<html lang="en">
<head>
<title>WorkZone Process</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
<meta http-equiv="x-dns-prefetch-control" content="off" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="Basis/css/app.css" />
<script src="Basis/js/jquery.js"></script>
<script src="Basis/js/angular.js"></script>
<script src="Basis/js/basic.js"></script>
<script localizationfile="" src="Basis/js/{0}.js"></script>
<script localizationfile="" src="Basis/js/init.Submission.{0}.js"></script>
</head>
<body ui-Intl="init.Submission.">
<div class="wzp-page" ng-cloak>
<form autocomplete="off" name="submissionForm" ui-startprocess ng-controller="FormCtr" novalidate>
<ui:title labelGroup="INITSUBMISSION" label="TITLE"></ui:title>
<ui:text ng-model="dataSource.Title" labelgroup="INITSUBMISSION" label="PROCESSTITLE" max-length="256" required class="newline"></ui:text>
<ui:datetime name="deadlineControl" labelgroup="INITSUBMISSION" ng-model="dataSource.Deadline" label="DEADLINE" class="newline"></ui:datetime>
<ui:text ng-model="dataSource.Description" labelgroup="INITSUBMISSION" label="DESCRIPTION" rows="4" max-length="3999" class="newline"></ui:text>
<div class="wzp-task-editdocument">
<wzp-multi-selector ng-controller="wzpSelectODATACtrl"
ng-model="dataSource.Documents"
pre-selected-values="PreSelectDocuments"
labelgroup="CONTROL"
label="DOCUMENTS"
placeholder="SELECT_DOCUMENTS"
options="{
register: 'Records',
filter: searchInCurrentCase(),
orderby:documentMruFilter(),
freetextfield:'Summary',
openItem:{
icon:'content',
title:'metadata',
actionRegister:'Record'
}
}"
always-editable="true"
class="newline wzp-task-documentlist"
ng-disabled="defaultValuesNotInitialized()">
<wzp-upload-document ng-model="dataSource.Documents"></wzp-upload-document>
</wzp-multi-selector>
</div>
<div class="wzp-task-editdocument">
<wzp-multi-selector ng-controller="wzpSelectODATACtrl"
ng-model="dataSource.Actors"
pre-selected-values="PreSelectParties"
labelgroup="INITSUBMISSION"
label="ACTORS"
placeholder="SELECT_ACTORS"
options="{ showSelected:true,
register: 'WzpFileUserRights',
text: ['ID', 'Summary','NameType_Value','NameCode_Value'],
filter: addContactFilter(),
expand:'NameKey,NameKey/AddressKey',
freetextfield:'tolower(Summary)',
openItem:{icon:'metadata',title:'metadata' , actionRegister:'Contact'} ,
orderby :'Summary',
iconType:'contacts'}"
always-editable="true"
class="newline wzp-task-documentlist wzp-select-with-filter"
ng-disabled="defaultValuesNotInitialized()"
required>
<wzp:sequence-mask-selector-filter ng-model="twoWayBindings.ActorSequenceMasks"
parent-ng-model-variable="dataSource.Actors">
</wzp:sequence-mask-selector-filter>
</wzp-multi-selector>
</div>
<div class="wzp-bottom">
<ui:help link="#WZP_UserGuide/Start_basis_submission.htm%3FTocPath%3DWorkZone%2520Process%2520Basis%2520Package%7CBasis%2520submission%2520processes%7C_____3"></ui:help>
<div class="wzp-buttonset">
<ui:button label="START" action="submit()" ng-disabled="isNotValid() || !defaultValuesInitialized"></ui:button>
<ui:button label="CANCEL" action="cancel()" ng-disabled="defaultValuesNotInitialized()"></ui:button>
</div>
</div>
</form>
</div>
</body>
</html>
WorkZone Process includes a variety of HTML elements which you can use for modeling views. This table displays some of the basic HTML elements used in the example above.
| HTML element | Description |
|---|---|
| ui:title | The title of the form. |
| ui:text | A free text field where you for example can set the hight and number of characters of the control. |
| ui:datetime | Specifies a date and time control. |
| ui:select | A dynamic list element which you can use for listing for example the WorkZone entities Document, Case and Contact. You can configure the list with various properties, for example sorting, which can define specific filters for valid values. You can open the WorkZone entities directly from the list. |
| ui:help | Points to context sensitive help. For customized solutions this can point to a given URL. |
| ui:button | Executes an action on the form. |
See a list of basic elements in the API documentation where properties are specified.
