Flow Graph

The Flow Graph SYSPRO Desktop function lets you create visual representations of the business processes and operating procedures in your organization. These flow graphs assist you in performing your daily procedures and can be used to improve the efficiency and accuracy of the tasks to be performed within these procedures.

Exploring

You create flow graphs in the Flow Graph pane by adding shapes and connecting them together in a flow. You can define these shapes to call a SYSPRO program, Report Writer report, Net Express program, 3rd party application, or SRS report. You can also use VBScripting to perform tasks such as calling a business object, changing the status of a shape, or writing an entry to a database.

  • This program is accessed from the SYSPRO Ribbon bar:

    SYSPRO Ribbon bar > Home

    Flow graphs can be designed per role using the Design Flow Graphs program (SYSPRO Ribbon bar > Administration).

Overview topic

SYSPRO Desktop

General topics

Customize and control application

Starting

You can restrict operator access to activities within a program (configured using the Operator Maintenance program).

Controls whether an operator can activate Design Mode within the Flow Graph pane.

If this activity is disabled, then operators cannot change their own flow graph or flow graphs by role, regardless of the setting against the Main Menu - Allow to design flow graphs by role activity, as the Design Flow Graphs option on the Administration tab of the Ribbon Bar will be disabled.

Controls whether an operator can design flow graphs by role.

If this activity is disabled, but the Flow Graph - Allowed to design flow graphs activity is allowed, operators will be able to change their own flow graph but not any flow graphs for a role.

  • If you access SYSPRO as a role-based operator, the list of flow graphs created for this role are displayed in the Flow Graphs for Role pane.

  • You can manipulate the shape beyond the capabilities of the Shape Properties pane by using the Apply XAML Markup option.

    This option opens the XAML Markup Editor that can be used to change the markup code.

  • When a flow graph is created for the first time it is automatically saved in the Base\Settings folder with the default flow graph name for this operator code - Flow_OperatorCode_IMPMENLV_00.XML.

Solving

Why don't you drop us a line with some useful information we can add here?

* Development-Authors@za.syspro.com

Using

  • The VBScript created for a flow graph is saved in the flow graph .xml file. You can email the file to another person or organization and it should work correctly (i.e. no additional files are required).
  • To define system-wide defaults for shapes, right-click on a shape within the shapes pane and select Default Appearance.

  • SYSPRO programs can be added to the flow graph by dragging them from the SYSPRO menu (under the Program List pane) and dropping them on the flow graph desktop.

    They can also be dragged from the Recent Programs section under the Navigation Pane.

  • You can also use the SYSPRO Program shape to add programs to the flow graph. Using this shape calls up the Add New Shortcut Wizard.

  • When in design mode, shapes can be grouped together by lassoing them.

    Another way is to click on the first item, then hold down the Ctrl key and click on all the other shapes you want grouped. Dragging one of the highlighted shapes will move all the shapes together.

Referencing

Field Description

Home

This lets you return to your home flow graph after moving away from it to another flow graph during the current run of SYSPRO.

Options

New Flow Graph

This lets you create a new flow graph.

This option is only available in design mode.

Open a Flow Graph

Select the flow graph to be opened.

If any changes were made to the previous flow graph, then these changes are saved automatically before the one you selected is opened.

Save

This lets you save the information in the current flow graph to a file with the current name. Select Save As to enter the name of the flow graph.

Save As Home Flow Graph

Display your default flow graph (\settings\Flow_operator_IMPMENLV_00.xml).

Save as Image

Save the flow graph as a .png image in your Base\Settings folder.

Email

This lets you create an email message, and attach the current flow graph's XML file.

When a flow graph is emailed it will contain all the pages within this flow graph.

You need to enable the Fax/mail integration required option against the operator to use this function.

Recent Flow Graphs

Select a flow graph from a list of the last 10 flow graphs that you accessed.

Templates

Open a sample flow graph from which to construct new flow graphs.

To enable design mode for a sample template you need to select Save As Home Flow Graph.

Edit

This option is only available in design mode.

Align

This option is only available in design mode.

You need to select more than one item on the flow graph to use these options. Items can be selected individually while pressing the Ctrl key and using the mouse pointer to click on them. Alternatively they can be grouped by lassoing them with the mouse pointer.

Align

This aligns multiple shapes to the left, right, top or bottom edge of the first shape selected.

Same Width

This resizes multiple shapes to the same width as the first shape selected.

Same Height

This resizes multiple shapes to the same height as the first shape selected.

Same Size

This resizes multiple shapes to the same width and height as the first shape selected.

Uniform spacing Top/Bottom

This evenly realigns multiple shapes.

Design Mode

Place the flow graph into design mode, from where you add and modify flow graphs and pages.

To exit this mode, select the Design Mode option on the toolbar. Any changes you made to the flow graph are saved as you exit design mode.

Fit to window

This lets you resize the contents of the flow graph so that it fits the current size of the flow graph pane.

If the existing content is too large for the pane, the content is proportionally reduced in size until it just fits. If the existing content easily fits within the pane, all of the content is proportionally increased in size until it just fits within the pane.

Zoom

This increases or decreases the size of the currently selected shape so that it just fits within the flow graph pane.

If multiple shapes were added to a group, then the size is changed so that the group just fits within the flow graph pane.

Set zoom at 100%

Return the flow graph page to its default size.

Enables double-click

This lets you configure the flow graph when not in design mode to require a double-click to invoke the action, as opposed to a single-click.

When not in design mode, clicking on a shape launches whichever application, VBScript or action is associated with it. When in design mode, the same functionality is available, but only when you double-click on the shape (so that you can check the functionality without having to exit design mode).

Selecting this option toggles the option on/off.

Page

This lets you navigate to other pages in the current flow graph, or type a new page name in the text box to create a new page in the current flow graph.

Back/Forward

The Back button is enabled after you click on a shape that transitions you to another page in the same flow graph.

When you select the Back button, the Forward button is enabled so that you can return to the previous page.

These buttons are enabled when you navigate between pages by clicking on a shape that is configured to perform a transition.

This menu is displayed when you right-click in the flow graph pane. Options are enabled according to your selection.

Field Description

Properties

Program Details

If a program is associated with the selected node item, then the Properties window is displayed from which you can change the name and the icon of the node item, as well as the program that is launched by this node item.

If no program is associated with the selected node item (e.g. it is set to transition to another page) then the Add New Shortcut Wizard is displayed enabling you to associate a program with the node item.

Remove Program Name

This lets you remove the associated application from this shape.

Change Picture

This lets you link an image to the shape. This only applies to the Picture shape.

If you copy or email the flow graph to another workstation the image may not be displayed on the other workstation. If you attach an image that points to a file in the \Base\Samples folder then the image property is inserted as {samples}\imageName rather than the full path. This is then resolved at runtime to the appropriate \Base\Samples folder on the client machine.

Action

This lets you transition to either another page on this flow graph, or another flow graph.

You define the type of action to perform on the Action Settings for Shape window.

You cannot apply an action to Table and Table Item shapes.

Apply XAML Markup

This opens the XAML Markup Editor window. XAML markup can be applied to any shape to create another shape.

Themed Colors

This lets you change the color of nodes and node items. A live preview of the changed color is indicated as you hover over the gallery items.

Duplicate

This lets you create a copy of the selected shapes.

Group

Group Selected Nodes

This lets you group together the selected shapes, enabling them to be moved as a unit.

Ungroup Nodes

This lets you ungroup the selected shapes.

Page

Each flow graph has one or more pages. Each page is like its own flow graph. All pages for a flow graph are held within the flow graph XML file.

New pages are added to a flow graph by typing their name against the page prompt on the toolbar. When you press the Enter key, the existing information on the page is cleared and a new page is displayed.

When a new flow graph is created, a default page called Primary Page is created within it. This page name can be changed when in design mode by right-clicking on the page background and selecting Page, Title, and replacing the name of the page.

Title

Enter the title of the current page.

This differs from the Page text field in the pane header in that this renames the current page and does not create a new page.

Delete

This lets you delete the current page.

The primary page against a flow graph cannot be deleted, even if its name was changed.

Show Grid Lines

This lets you toggle the grid lines in the flow graph.

Default Connector Style

This lets you select the default connector line style to be applied to the entire flow graph.

Background

This lets you apply a different background color across all pages in the current flow graph.

Select Automatic to remove the background color.

You create and maintain flow graphs while in design mode.

You drag the shapes found on the Shapes pane on to the flow graph pane and connect them to each other using connection points (i.e. input or output points).

You use the options on the Flow Graph Properties and Shape Properties panes to define the flow graph details.

You can also drag a SYSPRO program from the Program List or Recent Programs pane and drop it on the flow graph.

When flow graphs are in use each operator has a default flow graph (Home Flow Graph), and these can be linked to other flow graphs. You can transition back and forward between flow graphs, but only one flow graph can be displayed at a time.

Each flow graph must have at least one page, and may contain multiple pages within it. If a flow graph contains multiple pages, you can transition between pages, but only one can appear at a time.

Flow Graph Properties

Field Description

Properties

Author

Enter the name of the person who created the flow graph.

This enables you to contact the author to make changes to the flow graph.

Title

Enter a title for the flow graph. This title is visible in the header of the flow graph pane.

Status

Enter text to describe the status of the flow graph.

Comments

Enter comments you want to associate with the flow graph.

Auto fit to window

Specify that the content of the flow graph must be expanded or contracted to fit the size of the flow graph window at the time the flow graph is opened.

If the flow graph window size is subsequently changed by the operator it will not cause the flow graph to resize again during the time that it is open.

If you transition to another page on either the home flow graph or another flow graph, then the content of the flow graph also expands/contracts to the size of the window.

This does not apply to the home flow graph.

Created

This indicates when the flow graph was created.

Last modified

This indicates when the flow graph was last modified and saved.

Edit restrictions

Restrict editing

Prevent operators from modifying the flow graph.

This does not apply to the home flow graph.

Operators

Enter the operators (separated by semi-colons) who you want to restrict from modifying this flow graph.

Shape Properties

Field Description

Appearance

Shape type

This displays details for the shape that is currently highlighted.

This field is read only.

Caption

Enter the text you want to appear as the caption for the shape.

Tooltip

Enter the text you want to display when the mouse pointer hovers over the shape.

Caption position

Choose where you want the caption to appear on the shape.

Font

Select the font to use for the caption.

Foreground color

Specify the color of the text to use for the caption.

Background

Color

The primary color of the shape.

Second color

The secondary color here.

Fill type

Select the style in which the primary and secondary colors should be rendered.

If the Fill type is anything other than Solid, the shape will have a gradient that changes from the color specified against the Color field to the color specified against the Second color field. The direction of the gradient is dependent on this option.

Connections

Connection points

None

This removes all connection points from the selected shape.

Input only

This adds an input point to the selected shape.

This means that the table item can only have input connectors, which always connect to a point on the left.

Output only

This adds an output point to the selected shape.

Both

This adds both input and output points to the selected shape.

Connector style

This displays the style of the connector lines for the current flow graph.

If you select a connector line in the flow graph pane then you can change the style of the selected line.

Position

Width

This indicates the width of the selected shape. You can set the width here, either by entering a dimension or by using the slider to adjust the width.

Height

This indicates the height of the selected shape. You can set the height here, either by entering a dimension or by using the slider to adjust the height.

LocationX

This indicates the location of the selected shape, on a horizontal axis. You can enter a numerical location here to reposition the shape.

LocationY

This indicates the location, on a vertical axis, of the selected shape. You can enter a numerical location here to reposition the shape.

Properties

Program name

This indicates the six-character program name that the selected shape will launch.

Image path

This indicates the path and image name for the selected shape.

This option is only applicable to Picture shapes.

Transition page

This indicates the name of the page within the current flow graph to which the selected shape will transition.

Flow graph to open

This indicates the name of the flow graph that the selected shape will transition to.

You can use VBScript to control a node's behavior and appearance.

The OnLoad event fires as a flow graph is opened. When you double-click on a node to launch an application, the OnDblClicked event is fired. The variable NodeClickedCaption contains the caption of the item just clicked, and NodeClickedID contains the ID of the item just clicked. The ID is a unique identifier for a node in a flow graph, and it is this ID that can be used in the FlowGraphNodes variable to modify this or any other node in the flow graph.

If you want to adjust the appearance or behavior of one or more nodes, then double-click the FlowGraphNodes item in the variable tree view and the Modify Flowgraph Nodes window is displayed. You can click on any node in the current flow graph and its caption and ID will be shown in the dialog box.

Now enter any new properties as required (e.g. a new title, color, style and/or program name). Select the Add To List function to add your properties to the list. Now you can click on another node and repeat the process of adding properties.

When you have finished, select the Insert VBScript Code function to insert an XML code snippet into your current edit point in your script.

To implement different functionality depending on the node that is double-clicked, interrogate the FlowGraph.CodeObject.NodeClickedID variable.

Unlike most other controls using VBScript within SYSPRO, the VBScript that is created for a Flow Graph is saved in the Flow Graph file itself. This means that once you have created your Flow Graph and created a script for it, you can email the Flow Graph file to another person or organization and it should work correctly - there are no extra files that need to be deployed.

To control Flow Graph nodes

  1. Launch the VBScript Editor from within the Flow Graph pane (Right-click->Macro).

  2. Select the event you want to trap. The VBScript for FlowGraph window is displayed enabling you to access the various Flow Graph properties from the Variables pane.

    Variable

    Description

    DesktopAlert

    This variable is used to display a message on the operator's screen when a certain condition has been met.

    You can define the alert from this variable, including the duration(which defines how long the alert will stay on the screen) and the animation style (which specifies how the alert will appear or disappear).

    FlowGraphNodes

    This variable can be used to determine the ID of a shape and code used to perform tasks dependent on which shape was clicked. This includes changing the shape's title or color theme and calling a SYSPRO program.

    This code can be placed against the flow graph's OnLoad function to be executed as the flow graph is loaded, or against its OnClicked function to be executed when the operator clicks on the selected shape on this flow graph.

    NodeClickedCaption

    This variable is used to return the current caption of the shape that was clicked.

    This could be used within a message back to the operator to confirm that a specific task must be performed, to update a global variable, or to write out to a custom log file.

    NodeClickedID

    This variable is used to return the ID of the shape that was clicked.

    You can implement different functionality depending on the shape that is clicked by interrogating the FlowGraph.CodeObject.NodeClickedID variable.

    This is typically used to determine which shape was clicked, or make sure that a task is only performed when a specific shape was clicked.

    OnLoad

    This event is fired when the flow graph is loaded.

    If the script associated with the operator's Home Flow Graph contains an OnLoad function, this event will fire as SYSPRO is loaded, and the code within this function will be executed. This will happen whether the Flow Graph pane is visible to the operator or not.

    This event also fires when you enter and exit design mode.

    OnClicked

    This event is fired when the operator clicks on any shape on any page within the flow graph, and there is VBScript code against that flow graph's OnClicked function.

    This event is configured against the whole flow graph, and can be stopped by setting the function to false within the function.