DESIGN USING
WORKFLOW MANAGER -
BASICS
eTRAINING
1Introduction
Create a simple form, a simple list, and assign nodes to a workflow using GeoMedia Smart Client Workflow Manager.
Software
GeoMedia Smart Client Workflow Manager
Data
Specific data related to a city
Transcript
0:10
Thank you for watching this Hexagon Geospatial eTraining module: Graphical Workflow Design Using Workflow Manager – Basics.
In this module, you’ll create a simple form and a list. Then, you’ll assign them to the workflow itself, and view the result. Please note that the workflows are related to the specific data being used in our example. When you use the product with your own data, you will use your own workflows and values in them.
0:38
Start the Workflow Editor, and look at the workspace, composed of these main parts:
On the left-hand side, the Toolbox panel contains drag-able components. These
components may change depending on which features you are using. For example, you currently see the Nodes, which include Forms, Lists, and Workflows. You’ll see how to use these items later in this module.
On the right-hand side, you see the Properties panel, which lets you change options in the workflow, form, or list.
The center of the workspace is the canvas, where you design the workflow itself – which
is what you see here. You also use it to design the form or list.
At the top of the screen, you see the options that let you add custom styles or scripts. You can also create or edit forms and lists which have already been generated.
Create a Simple Form
1:27
First, create a simple form, which you will later use in the workflow.
You see two options, Forms and New. The Forms option lets you choose the full list of forms that have already been created. The New option lets you create a new form.
2. Click Forms to choose the full list of forms. The Forms tab appears on the top left of the workspace. You now see a New button.
3. Click this button, and you will see the three parts of the workspace that let you create a new form.
1:59
On the left-hand side, is the Toolbox. Use this to drag widgets into your form and add some layout additions. The main area of the workspace is where you design the form. One the right you can change the properties of the currently selected element.
Notice the cursor changes whenever you hover over a clickable element.
4. First, change the Name of the form to Budget.
5. Also change the Label of the form to Budget.
The label is displayed in your workflow. If you don’t specify a label, the form name will be displayed.
6. Typically, forms used in workflows require an ID field. Type ID for this value. All other properties can be left as default.
2:39
Next change some of the properties of the formtab and formgroup. By default, each form has a formtab and a formgroup, but you can drag the other elements onto the form from the Toolbox on the left.
7. Click NewTabPage1 to select it, and change the Name to LocalBudgetTab.
8. Click Edit to change the Label. Type General to rename it.
9. Click NewGroup1 to select it, and change the Name to LocalBudgetGroup.
10. Change the Label by clicking Edit and by typing Welcome to the Community
Budget voting in Lodz.
3:25
Now drag elements from the Toolbox onto your form.
11. Click on the TextField element from the Toolbox, hold down the left mouse button, and move the mouse to the middle part of the workspace.
Notice that anywhere an element can be dropped is highlighted by a blue horizontal line.
12. Drop it into the form group by releasing the left mouse button when you see the blue line. Now change the Name and the Label properties.
13. Change the Name to ID and the Label to ID.
Because the TextField will be the ID field, you also need to set the Datatype.
4:06
The TextField should be hidden in the window. Notice the Visible property on the right-hand side. By default, this property is checked, which means that the value behind it is true. If you uncheck the box, you will set the value to False, but you really want to set the value to Hidden.
15. To change the value to Hidden, click Edit.The Value Editor dialog opens. This dialog allows you edit the value for the selected property, in this case, the Visible property. There are different ways to set this value, as indicated by the different tabs. On the Static Value tab, the value is set to true.
4:41
The SQL tab lets you write an SQL statement to set the property. You can also write your own Value Provider using the Object-Provider tab, or your own javascript by using the JavaScript tab, or you can use a placeholder by selecting the Placeholder tab and by selecting the arrow on the Placeholder field and the option that you want from the list. Additionally, you can set a static value for the property, which you will do now.
16. Click the Static Value tab, and type hidden.
17. Click OK to close the window and return to the form design view. The checkbox for Visible is gone and instead the Static value is displayed.
18. Because the ID field will not be shown in the form, uncheck the Required option.
19. Save the properties in this session by checking the Save In Session option.
5:32
Next, add a TextArea which will act as a description field.
20. Drag the TextArea widget from the toolbox on the left side into the main part of the window, and drop it where it is needed, in this case underneath the ID textfield.
21. Change the TextArea name property, type Summary.
22. Type What is it? For the Label property.
For this particular element, you will set the description text that appears by default according to an SQL statement from the database.
23. Click the Edit on the Defaultvalue property and select the SQL tab of the Value Editor.
24. Paste in the specific SQL statement that makes sense in the context of your particular data that is being used in your workflow.
25. Click OK to close the Value Editor, and notice that the Defaultvalue property is changed to SQL.
26. Check the Save In Session property.
6:31
The final widget you place on the form is a form Action.
27. Drag the Action widget from the toolbox to the main part of the workspace, and in this case, outside the FormGroup.
29. For the Label, type Vote NOW!.
30. For the Action property, click Edit to open up the Value Editor.
31. 15 To set the value of the Action to a simple JavaScript command, select the JavaScript tab, and paste or type the necessary code.
The value of the Action property changes to the JavaScript code and will let you navigate to a certain page within the workflow when you click on the Action button.
Create a Simple List
7:18
Now you’ll create a new list. You will begin again at the starting point of your workflow.
32. At the top of the screen, click on the arrow beside Lists and click New. A new tab is displayed called NewList1.
Notice that the toolbox on the left now only contains Listelements because you can’t use any widgets for the form within the list. As you did with the form, you will change the name of the list.
33. Change the Name of the list to TopCityProjectList.
34. For the Table, type citywide_bbox.
The Table property specifies which table the attributes come from.
35. For the ID Field property, type gid.
8:02
Add a SQL statement to set up a Filter, to limit the number of elements shown in the list.
36. Type SQL[gid in (Select gid from citywide not null order by votes desc limit 5)].
You will now set the Order by property, so that the votes will be ordered in descending order by the number of votes.
37. For the Order by property, type order by votes desc.
8:35
You can also change the Pagesize property, to define when a new page will get created within the list. In this example, leave the Pagesize set to 20.
Lists can contain columns, and you will create three columns for this list.
38. Drag three columns from the Toolbox to the main area of the workspace.
39. For the first column, set the Name property to gid and the Label property to id.
40. Click the box to the right of the column and select number to select number for the Datatype property of the first column
41. For the second column, set the Name property to name.
9:23
43. Set a SQL Select command for the middle column by clicking Edit and by pasting the appropriate code when the Value Editor displays. When done, click OK.
44. For the third column, set the Name to votes and the Label to Votes.
45. Set the Datatype property to number for the third column also.
It’s also important to know how to delete elements from within a list. This can be helpful if an element is accidentally added to your list.
46. Drag a RowAction into the list, on right side.
47. Delete this element by first selecting it, and then by either selecting Delete on your keyboard, or by clicking Delete on the right side of the Properties panel. A confirmation dialog will display. Click Yes.
Assign Nodes to the Workflow
10:14
You will now assign the nodes to the workflow.
48. Close the list by clicking the X to the right of the name of the list at the top of the screen. You are again at the starting point of your workflow.
49. Click Forms at the top of the screen to see an overview of all the forms and lists that you have defined.
The forms and lists are shown together because you have not yet made the distinction between forms and lists in the Workflow Editor. This is done when you assign your forms and lists to nodes. In the Workflow Editor, there are specific icons to indicate a form element, and a list element. You will assign your forms and lists to nodes now.
50. Close the list of forms by clicking the X to the right of the name.
51. From the toolbox, drag a Form node to the Root node in the center of the workspace.
10:57
A dialog prompts you to enter the ID of the new node, which is also the name of the node.
52. Type Budget to specify the ID of the first form you created.
53. Click OK.
54. Select the Budget node, and specify its properties in the Properties panel.
55. For the Label, type Lodz Community Budget.
56. Because you are defining a form node, select the form ID Budget in the Form field.
57. If you have more than one form node like in this example, drag another Form node to the Root node.
58. Type Citywide to specify the ID of the second form that you created.
59. Click OK.
11:39
61. Because you are defining a form node, select the form ID, VoteCitywide, in the Form field.
After you have assigned a form to a node, you can click Edit for the selected element and you will be able to edit the form.
62. Dismiss the editing of the form by clicking the X next to the form name in the breadcrumb path.
You can also select a Follow Node by first selecting the form, and then selecting either the name of the form or the list that will follow the form, in the Follow Node field.
12:09
The blue end shows you the end point and the white end shows you where the follownode was defined.
63. Now, drag a List node into the workflow. You don’t have to drag it over the Root node, but can drag it onto the form node that will be its “parent” node.
64. When the dialog opens, type TopCityVoted to specify the ID of the new node, and click OK.
65. In the Properties panel, type Top Citywide projects for the Label of the list, and select TopyCityProjectList for the List property.
12:39
In the breadcrumb path, if you click on either Forms or Lists, you will now see only the corresponding elements (either the forms or the lists).
66. Click Forms, and note that only your forms are displayed.
Your workflow can be as large as you need it, with multiple lists and forms. You can assign follow nodes, as shown with the arrows, whenever your workflow requires them.
Remember that the blue end shows you the end point and the white end shows you where the follownode was defined.
Workflow nodes can also be dragged from the toolbox and dropped to the location that you want.
13:23
In a longer workflow, like this example, you can make it easier to identify the main parts of the workflow by grouping similar elements under a workflow node.
67. Drag any forms that are needed by the workflow into the workflow node.
68. When it’s time to run the workflow, you can see the results of clicking on the simple form created earlier, and how the list created is used.
13:46
Thank you for watching this eTraining module from Hexagon Geospatial. For more eTraining, please visit hexagongeospatial.com/eTraining.
