Introduction

JOC Cockpit offers a graphical

...

Workflow Editor for designing workflows, jobs and dependencies.

• Workflows can be designed by drag & drop in a graphical view.
• Workflows can be edited in a JSON source code view.
• For job Job scripts within a workflow can be edited using a specific special editor is provided that allows to work with working on longer scripts.

The Workflow Editor supports keyboard shortcuts and mouse operations for moving objects and copying, cutting and pasting objects.

Graphical Workflow Editor

The workflow editor Workflow Editor is available from the Configuration->Inventory View that offers . This view has the following panels:

• Left panel: The tree panel allows navigation to

...

• folders and objects. Workflows can be available in any folder from the sub-folder

...

• Workflows.
• Middle panel: The design

...

• panel allows

...

• JS7 - Workflow Instructions

...

• to be copied from the tool panel to a workflow by drag & drop. 
• Right panel: The property editor allows

...

• management of instruction properties such as the jobs that are available with a workflow.
  
  

Drag and Drop

The middle panel holds a vertical toolbar with icons for the respective relevant JS7 - Workflow Instructions.

From the toolbar the The first instruction icon for a Job indicates a JS7 - Job Instruction and can be dragged from the toolbar and dropped to in the indicated area:

• From the toolbar the The  icon is used to add a Job Instruction from the toolbar.
• The dropping area has to be touched with by the cursor, not with by the Job Instruction icon.
  
  

To add further add instructions to a workflow, for example a second Jobjob, the Job Instruction is dropped to on the connector line lines before or after the existing job.

• The connector line has to be touched with by the cursor, not with by the Job Instruction icon.
  
  

Example for Adding Fork/Join Instruction Branches

When a JS7 - Fork / Join Instruction is dragged and dropped then users Users can add branches for jobs that run in parallel by dragging and dropping a JS7 - Fork-Join Instruction.

• From the The toolbar the  Image Modified icon is used to add a Fork/Join Instruction.
• In a first step an empty block for Fork and Join is created.
  
  

To add a branch an instructionsto the Fork/Join Instruction, for example a Job, the  icon can be  Job Instruction icon is dragged and dropped directly onto the Fork Instruction icon.

• The  Fork Instruction icon has to be touched with by the cursor, not with by the icon for the Job Instruction that should be is being added.
  
  

When the operation to drag and drop dragging and dropping of a Job directly onto Instruction onto the  Fork Instruction icon is repeated, then each time an additional branch is created like thiswill be created each time as shown below:

To Users can add jobs to an existing branch users can drag and drop by dragging and dropping the  Job Instruction icon to onto the connector line lines before or after an instruction such as a job in a branch like this:

Example for Adding If Instruction Branches

Adding a JS7 - If Instruction to a workflow allows to perform conditional execution of jobs and further instructions to be performed.

• From the toolbar the Image Removed icon The Image Added If Instruction icon is used to add an If Instruction from the toolbar.
• In a first step an empty block for If and If-End is created.
• The property editor allows is then used to specify the predicate of the If Instruction, i.e. the condition.
  
  

To add a branch to the an If Instruction, for example, for a Jobjob, the  icon can be  Job Instruction icon is dragged and dropped directly onto the Fork Image Added If Instruction icon.

When the operation to drag and drop a Job If a further Job Instruction is dragged and dropped directly onto the  If Instruction icon is repeated then , a second branch will be created for the If Instruction is created like this:as shown in the diagram below.

• The left hand branch is will be processed if the condition evaluates to true, the right hand branch is will be processed if it evaluates to false.
• The  icon has to be touched with by the cursor, not with by the Job Instruction icon.
  
  

Visible Section Operations

Moving the Lens

The visible section in the design panel can be moved using the mouse and keyboard shortcuts:

• Left, right, up and down arrows move the lens to focus on different sections of the design panel.
• Alternatively users can move the lens by clicking and moving the blue frame with their mouse.
  
  

Image Added

When hitting an arrow key the focus is moved in the corresponding direction.

Image Added

Zooming

When clicking in the design panel a horizontal toolbar is made available:

Image Added

The toolbar offers 

• the Image Addedzoom-in button to enlarge objects in the visible section of the design panel.
• the Image Addedzoom-out button to reduce the size of objects in the visible section of the design panel.
• the Image Addedzoom-default button resets the zoom to its default value.
• the Image Addedzoom-fit button zooms the visible section to the size required to make all objects visible.

Object Operations

Selecting Objects

The following operations are supported for selecting objects:

• Hitting the Ctrl+A key selects all objects in the design panel.
• Pressing the Ctrl key and clicking individual objects in the design panel allows multiple objects to be selected.
• Alternatively, users can highlight an area with the mouse to mark objects that should be selected:
  
  

Image Added

Copy, Cut & Paste Objects

The following keyboard operations are supported:

• Ctrl+C: copies the selected object(s) to the clipboard.
• Ctrl+X: cuts the selected object(s) to the clipboard.
• Ctrl+V: pastes the selected object(s) from the clipboard.

When hitting the Ctrl+C key a popup message appears that indicates: Copied!.
Similarly when using the Ctrl+X key a popup message indicates: Ready for paste!.

Image Added

In order to select the position to which objects should be pasted users can click a connector line that will be highlighted in green like this:

Image Added 

When hitting the Ctrl+V key the object(s) are pasted to the indicated location:

Image Added

Removing Objects

The DEL key can be used to remove selected objects.

Alternatively, when moving the mouse over an individual object its Image Added action menu becomes visible:

Image Added

Clicking the action menu brings forward the menu item to remove the respective object.

Image Added

Removal of objects can be undone, see next section.

Undo/Redo Operations

The Workflow Editor offers a stack of up to 20 levels to undo and redo previous operations for both graphical instructions and text input to the Property Editor.

When clicking in the design panel a horizontal toolbar is made available:

Image Added

The toolbar offers:

• the Image Addedundo operation that allows the most recent graphical instruction or text input to be undone.
• the Image Addedredo operation that allows redoing the most recent undone operation.

Repeatedly hitting the undo / redo buttons applies these operations to previous operations further in the stack.

Download / Upload Operations

The Workflow Editor allows objects in JSON format to be downloaded and uploaded.

When clicking in the design panel a horizontal toolbar is made available:

Image Added

The toolbar allows:

• an object to be downloaded using theImage Added icon. Users should locate the downloaded object in the directory that is offered for downloads from their browser.
• an object to be uploaded using the Image Added icon. For further information on uploads see the JS7 - How to upload .json examples article.

Export Operations

The Workflow Editor allows the graphical export of objects in PNG format.

When clicking in the design panel a horizontal toolbar is made available:

Image Added

The toolbar allows objects to be exported using the Image Addedicon.

An exported .png file can look like this:

Image Added

JSON Object Editor

JS7 stores scheduling objects in JSON format. Users can display and can modify the JSON representation of objects such as workflows from the object's action menu:

...

The action menu items Show JSON and Edit JSON bring forward popup windows to display and to modify for displaying and modifying JSON code respectively.

• The JSON code is created generated and validated with JSON Schemas that are available per for each object type, see JS7 - Inventory Storage Format.
• The JSON Editor is explained from from the JS7 - Inventory Object Editor (JSON) article.

Job Script Editor

The JOC Cockpit Configuration->Inventory View offers opens the Script Editor for the modification of job scripts:

• Job scripts can be directly edited from the multiline multi-line input field in the lower right hand corner of the property editor.
• When moving The Image Added pencil icon will be displayed when the mouse is moved into the job script input field then the Image Removed pencil icon is displayed. Clicking this icon invokes the Script Editor.
  
  

...

The Job Script Editor is explained in more detailed with detail in the JS7 - Job Script Editor article.