Edit form

Edit forms allow you to edit properties of an existing process.

Each package should have at least one edit form definition, a default edit form HTML and a controller (js) file.

Definition:

<FormDefinition>

<FormGuid>{ EditForm Guid}</FormGuid>

<Name>Edit.Default</Name>

<Default>J</Default>

<ContentType>TEXT/HTML</ContentType>

<ContentFile>ui\edit.Default.html</ContentFile>

<ControllerFile>ui\edit.Default.js</ControllerFile>

</FormDefinition>

The same GUID should be defined for each workflow definition:

<WorkflowDefinition>

<Version>6.0.0.0</Version>

<XamlFile>Workflows\Submission.xaml</XamlFile>

<EditFormGuid>{ EditForm Guid }</EditFormGuid>

Default Edit form html file

The edit form allows you to modify title, description, deadline (DueDate), and priority of an existing process.

<!doctype html>

<html lang="en">

<head>

<title>WorkZone Process Edit Page</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_6.0.0.0/css/app_6.0.0.0.css" />

<script src="Basis_6.0.0.0/js/jquery_6.0.0.0.js"></script>

<script src="Basis_6.0.0.0/js/angular_6.0.0.0.js"></script>

<script src="Basis_6.0.0.0/js/basic_6.0.0.0.js"></script>

<script localizationfile="" src="Basis_6.0.0.0/js/{0}_6.0.0.0.js"></script>

<script localizationfile="" src="Basis_6.0.0.0/js/init.Submission.{0}_6.0.0.0.js"></script>

</head>

<body ui-intl="init.Submission.">

<div class="wzp-page" ng-cloak>

<form autocomplete="off" name="editForm" novalidate wzp-edit-process >

<ui:title labelgroup="SUBMISSIONFORM" label="EDITFORM"></ui:title>

<ui:text ng-model="dataSource.Title" labelgroup="HEARINGFORM" label="PROCESSTITLE" max-length="256" required class="newline" ></ui:text>

<div class="twoRowBlock">

<ui:datetime name="deadlineControl"

labelgroup="EDITFORM"

ng-model="dataSource.DueDate"

label="DEADLINE"

class="twoRowDate">

</ui:datetime>

<wzp:selector ng-controller="wzpSelectODATACtrl"

ng-model="dataSource.Priority"

labelgroup="CONTROL"

label="PRIORITY"

options="{

multiple:false,

allowClear:false,

minimumInputLength:0,

minimumResultsForSearch:-1,

query: PriorityQuery }"

placeholder="SELECT_PRIORITY"

class="twoRowSelector">

</wzp:selector>

</div>

<ui:text ng-model="dataSource.Description" labelgroup="SUBMISSIONFORM" label="DESCRIPTION" rows="4" max-length="3999" class="newline" ></ui:text>

<div class="wzp-bottom">

<ui:help link="#Prcs_overview/Use_the_process_overview.htm#Edit_process_details%3FTocPath%3DThe%2520Processes%2520overview%7CUse%2520the%2520Processes%2520overview%7C_____5"></ui:help>

<div class="wzp-buttonset">

<ui:button label="SAVE" action="submit()" ng-disabled="isNotValid()"></ui:button>

<ui:button label="CANCEL" action="cancel()"></ui:button>

</div>

</div>

</form>

</div>

</body>

</html>

 

Note: The main angular directive for an edit form is wzp-edit-process. For more information, see API Forms.

Default Edit form controller (JS) file

"use strict";

(function (window, angular, undefined) {

angular.module('wzp', ['ngResource', 'ngUtilities', 'localize', 'common.services', 'wzp.filters', 'settings', 'ui.helpers', 'ui.title', 'ui.text', 'ui.datetime', 'ui.sortable', 'ui.button', 'ui.help', 'wzp.edit-process','wzp.controls']);

window.init = function (wzpContainer) {

var editFormContainer = new window.EditFormContainer(wzpContainer);

angular.module('wzp').constant('wzpContainer', editFormContainer);

angular.bootstrap(window.document, ['wzp'])

}

 

})(window, window.angular);

 

The code for the EditFormContainer class is defined in the basis.js file in the Basis package.