Chat now with support
Chat with Support

erwin Evolve 2020.1.1 - User Guide

erwin_Evolve_User_Guide
erwin_Evolve_User_Guide
Getting Started Creating Sites and Pages Data Layout Options Filtering Data Property Groups Data Visualizations Displaying Diagrams Using Web Modeler Automatic Diagrams (Diagram Designer) Navigating your Site Workflow Explained Social Interaction Features Questionnaires Reference Configuration and Administration Customizing Your Site Troubleshooting Upgrading

Display Object Data with Diagram Pop-outs

Display Object Data with Diagram Pop-outs

This page explains how to create and use Diagram Pop-outs to display the data behind objects that appear on diagrams.

You can use Diagram Pop-outs with all display Layouts in Evolve.

See Layouts and Behaviors Explained for a full list of supported Layouts.

Diagram Pop-outs are used to display information about objects that appear on a diagram.

When a user clicks on an object on a diagram in the Site, a pop-out panel showing the object's details is displayed on the right of the browser window.

Diagram Pop-outs are completely customizable, so you can choose exactly what data you want to show for any given object, and you can even display different pop-outs depending on the Category of the object.

Pop-outs are constructed in a similar way to Object Pages, although you cannot use Tabs, but as such they can include properties of the object, lists of associated objects, as well as some visualizations. Behaviors are not supported in Diagram Pop-outs.

Like Object Pages, Diagram Pop-outs are Object Type specific, so you must create a pop-out for each type of object you want to view the details of.

There are two steps to getting Diagram Pop-outs working on your Site:

1.Create a Diagram Pop-out

2.Configure a page to use a Diagram Pop-out.

If your Site was created in Evolve 2.2 or earlier, you must enable Diagram Popouts in Evolve Designer before you can create any.

To do this:

i.Open your Site in Evolve Designer

ii.Right-click the Site node and select Add Diagram Popout Node

The Diagram Popouts node is added to the bottom of the Site tree.

What do you want to do?

Create a Diagram Pop-out

To create a Diagram Pop-out:

          1. In Evolve Designer, right-click the Diagram Popouts node and select Add Object Page for Object Type > [object type]

          A node is added for the Object Type you selected

          2. Configure your pop-out to display some object data and/or associations

          You configure the pop-out to display data in a similar way to how you build an Object Page, using Property Groups and Associations. However, there is one           important difference to an Object Page - you cannot use Tabs.

          You can use multiple Property Groups, and you can use multiple Associations.

          See here for information on using Property Groups

          The Property Group Layout 'FlatList' is particularly useful on Diagram Pop-outs, as it combines multiple properties in a simple display format.

          See here for working with layouts and behaviors for Associations

          3. When you have completed the configuration of your pop-out, Save it.

In order for your pop-out to display on a diagram page, you must configure the page to use it.

Configure a page to use a Diagram Pop-out

Even if you have created a Diagram Pop-out, you must configure individual pages in your Site to use it.

You can display a Diagram Pop-out on any Object Page or Index Page which is configured to display a diagram.

To configure a page to use a Diagram Pop-out:

          1. On your page, select the diagram behavior node you want the pop-out to work with

          The CW Modeler Diagram, Vector (HTML5), or Visualization (Automatic Diagram) node

          2. Use the Diagram Popouts area to choose the pop-outs you want to use for different Object Types that appear on the diagram

          Use different rows to specify different pop-outs for different Object Types or Categories of the same Object Type.

i. Use the Object Type drop-down to select the Object Type you want a pop-out for

ii. Use the Category drop-down to select the Category of the Object Type you want the pop-out for - or leave the Category as 'UndefinedValue' if you want your pop-out to apply to all instances of the selected Object Type

iii. Use the Diagram Popout drop-down to select the specific pop-out you want to use for the Object Type and Category combination you have chosen

          3. Save and Publish your Site.

Create Category-specific Diagram Pop-outs

You can show different pop-outs for different Categories of the same Object Type.

To do this, create multiple pop-outs for one Object Type, then, when configuring your page to use the pop-outs, choose different pop-outs for different Categories of objects.

If you want to have just one Category of Object Type showing a different pop-out to the others, create a generic pop-out and set it to 'UndefinedValue' on the diagram page, then specify the Category pop-out just for that specific Category.

 

Display a Diagram on the Home Page of your Static Site

Display a Diagram on the Home Page of your Static Site

If you publish your Site as a Static Site, you can create a special home page which displays a CW Modeler diagram.

This feature does not work with Dynamic Sites.

To display a diagram on your Static Site home page:

          1. Create a new Diagram Index Page

          2. Enter 'home' as the Page Name

          3. Ensure your page filter is configured so that only one diagram is selected

          For example: 'ID = 12'

          4. Save and Publish your Site.

Displaying Vector (HTML5) for Displaying Diagrams

Displaying Vector (HTML5) for Displaying Diagrams

This page explains how to display CW Modeler diagrams in Vector (HTML5) format in your Evolve Site.

Vector (HTML5) diagrams introduce a new method for displaying CW Modeler diagrams, bringing increased load performance, better picture quality and perfect scaling.

Use the Vector (HTML5) Diagram display

To use the Vector (HTML5) Diagram display:

If you want to compare the appearance of the Vector (HTML5) version of your diagram and the original CW Modeler version, you can display both versions in your page. To do this, each diagram must be displayed in a different Tab. Ensure that you enter a specific Layout ID for each.

This is a useful way to provide us with feedback about the differences you experience.

1. Open one of your existing Diagram pages.

2. Add a new behavior to the Layout Diagram node you want to change, ensuring you choose the Vector (HTML5) option.

3. Delete the existing CW Modeler Diagram node.

Support for diagram elements

The Vector (HTML5) diagram behavior supports all diagram elements typically available to CW Modeler diagrams, except for the following:

The following elements are NOT supported:

oAssociation Type Regions

The following elements are PARTIALLY-supported:

oVersion Control (all items except for the Detailed Object section)

oFree Text (only Free Texts referenced on the palette)

IMPORTANT

Vector (HTML5) Diagrams will not correctly display any diagram element where the formatting of the element is applied directly on the canvas.

Only formatting applied to items on the New Objects Palette of the corresponding template diagram are displayed correctly.

Diagram Shapes

There is partial support for available for the following diagram shapes:

RED

=

Not Supported

BLUE

=

Supported with differences to the original CW Modeler diagram.

 

Please note that due to the rendering limitations of Internet Explorer 9 and 10, using shapes with a dashed outline may prevent the diagram from rendering properly.

 

Lines and Connectors

All lines and Connectors are supported.

Shape Regions

The following table shows the support for shape regions:

Region

Level

Label

Supported

Association Type

Supported

Association Type (Custom)

Not supported

Property Value

Supported

Property Value (Custom)

Supported

Property Visualization using Reference property

Supported

Property Visualization using Palette value

Supported

Explosion with rule and category

Supported

Property gauge using a reference property

Supported

Property gauge using Palette

Supported

Property Gauge as date range

Supported

Explosion

Supported

Explosion with rule

Supported

Navigation

Supported

 

A yellow triangular () Warning icon will display next to the action buttons in the top right hand corner when:

oIf there is misalignment between the Template Palette and the Diagram Palette. However, the icon will not display if the misaligned objects in the palette use names that have previously been accepted for aligned objects, even if their settings have been changed.

oA diagram uses unfinished or missing connectors. Close and reopen the diagram in Corporate Modeler . If the Warning icon remains, this is likely due to another issue.

oMissing Shapes create a Broken Layer. Close and reopen the diagram in Corporate Modeler . If the Warning icon remains, this is likely due to another issue.

 

Please be aware that certain fonts are not supported by all browsers. When using the HTML5 Canvas, some fonts will therefore be substituted for alternative styles, depending on your browser type.

Publishing Static Sites

If you only use the Vector (HTML5) behavior to display diagrams in your Static Site, you can tell Evolve to no longer generate image files of the diagrams in your repository when you publish the Site.

Generating diagram image files is often the most time-consuming part of publishing a Static Site and they are not needed for the Vector (HTML5) behavior, so choosing not to export them can significantly speed up publication.

Use the Export Diagram Images option on the Site node settings to disable diagram image generation.

 

Editing Business Process Diagrams

Editing Business Process Diagrams

Please check with your Administrator that firstly, your Server and Internet Browser meet the necessary system requirements to use BP modeler. Secondly, check with your Administrator that the eModeler feature is enabled.

BP modeler is used to both edit and create Process Diagrams online, using predefined Dynamic Templates and Themes.

The different features within the Editor are detailed below:

Title Bar

Displays the Diagram Draft and related Template Names

Zoom Controls

Zoom In, Reset Scaling, Zoom Out and Full Screen.
Click and move the 'Radar' view to zoom around the diagram.

Canvas Controls

Undo, Redo, Save & Publish, Help and Exit Edit Mode.

Editor Menus

Home to the different BP Modeler Panes: Diagram, Appearance, and Actions.

Canvas Area

The area where the edited/created Process Diagram will display.

Navigation

BP modeler controls that can be used when editing a diagram.

Click Summary

Mode

Click Type

Behavior

Standard

Single

Displays the Context pane for that Shape/Connector in the Menu pane (edit properties, connect another Shape, add/remove Swimlane).

Double

Opens the Properties sub-menu and enables the Name and Title fields for entering or editing the Shape/Connector's name.

 

Keyboard Shortcut Summary

Keyboard Shortcut

Behavior

Ctrl+ +

Zoom In

Ctrl+ -

Zoom Out

Esc

Deselect all shapes

Ctrl+Z

Undo the last change

Ctrl+Y

Redo the last change

Enter

Save Diagram/Shape/Connector changes when editing properties

Delete

Deletes selected Shape(s)/Connector(s)

 

BP modeler is a licensed application. In order to use it, additional licenses are required on a per user basis.

Drafting & Publishing

When BP modeler is enabled for an Object Type, 2 menus are created; a drafts menu and a published menu.

Drafts Menu

The Drafts menu displays all the current drafts for the specified object type. Drafts can be viewed in Tile view, or Full view. Hovering over the draft will reveal the draft controls:

These controls allow you to view, edit, delete or open the diagram in the Object page.

Published Menu

The Published menu displays all the published diagrams for the specified object type. Drafts can be viewed in Tile view, or Full view. Hovering over the draft will reveal the diagram controls:

These controls allow you to view, edit or open the diagram in the Object page.

Creating New Diagrams

In the top-right of the Drafts and Published pages there is an icon that can be clicked to create a new diagram:

Duplicating Diagrams

To duplicate diagrams, edit an existing diagram and navigate to the Actions menu:

Clicking the first icon will result in a duplicate of the current draft being created.

What do you want to do next?

 Enable BP modeler

BP Modeler is not enabled by default.

 To Enable BP modeler:

The Server Configuration Dialog will open.

BP modeler will be enabled for use on your Site.

1.Open Evolve Designer and select the Evolve Designer Models launcher dialog, click on the Server Configuration button:

2.Open the Features tab and check the Enable BP modeler check box.

3.With the function enabled, Open the Dynamic Deployment tab and click the Save button to commit the changes to your Site.

Adding BP modeler Pages to Object Types

If you already have eModeler enabled (from version 3.1 or lower) for an Object Type you will need to remove or delete the eModeler nodes prior to completing these steps.

In Evolve Designer, right click on Object Pages and hover over Add BP modeler Page for Object Type to expand the list of Object Types. Simply click an object type and Evolve will automatically add the pages to view BP modeler drafts and published diagrams.

          

Once your configuration is complete, publish your Evolve site as usual.

Configuring a dynamic template to support BP modeler

You should already have a Process diagram template configured in CW Modeler that offers the shapes you would like to use in your Process diagram palette.

Launch Evolve and login as a System Manager and you will now have an Administration menu, under which you will see Dynamic Template Editor.

          

Create a New Diagram from an Existing Template

To Create a New Diagram from An Existing Template:

A sub-menu for that process will open, listing three options to select from:

The Process Flow page will open.

The BP modeler canvas will open and you can begin to create your new Process Diagram.

          1. Open Evolve and click on the Processes tab.

          2. Click on the All Processes option to display a list of all available processes.

          3. From the list displayed, select the Process that you wish to build a Diagram for.

oProcess

oProcess Flow

oProperties

          4. Click on the Process Flow option.

          5. Click on the Create a new diagram based on the template [Template Name] link at the top of the screen.

 

Create a Basic Linear Process Diagram

A basic Process Diagram will capture three simple steps: The Event that triggers the process, an Activity or Decision, and a Result.

To Start Your Basic Process Diagram:

See Create a New Diagram from an Existing Template.

The Shape will be transferred to the Canvas Area.

The description will be added to the Shape:

The Next Shapes available for selection will then display in the Shape Menu Pane:

The second Shape will be transferred to the Canvas Area and connect to the existing Event Shape:

The Next Shapes available for selection will then display in the Shape Menu Pane:

This final Shape will be transferred to the Canvas Area and connect to the existing Activity/Decision Shape:

Your basic Process Diagram is now ready to be saved.

See Saving your Work in eModeler.

1. Open eModeler and select the appropriate Process from which to create the new Diagram.

2. In the Shape Menu Pane, click on the appropriate Event Shape.

3. Add a description or title to the Shape by entering details into the Name field in the Properties Menu Pane.

4. Click on the green circle containing a tick, the Validate your Changes button, displayed beneath. Alternatively, press the Enter button on your keyboard.

5. Select the next Activity/Decision Shape by clicking on it.

6. Add a description or title to the Shape and save it.

7. Select the available Result Shape by clicking on it.

8. Add a description or title to the Shape and save it.

9. Save your Diagram.

Saving your Work in eModeler

To Save a Draft

Drafts save automatically as they are edited, so you will never have to worry about accidentally closing the browser and losing all of your changes.

To Do Menu Pane

There is a fourth, hidden, menu pane called To Do, which only appears if there are any aspects of your Diagram requiring action. The To Do menu will list these actions and the Shapes relating to these tasks will be highlighted by a red border. Users will be prevented from saving your work until these actions are addressed.

Once the actions have been completed, you will be able to successfully save your work.

1. Select a Task from the list to be taken to the relevant aspect of the Diagram requiring action.

 

Add Descriptions and Properties to a Shape

To Add a Description or Property to a Shape:

As soon as new information is added to the fields, a green circle containing a tick, the Validate your Changes button, displays beneath.

 

 

 

 

eModeler supports all diagram elements typically available to CW Modeler diagrams, except for the following Property Types:

oDate Range

oDistribution Properties

oThe use of Memotext in HTML5

For a full list of the existing Regions supported, see: Shape Regions.

1. Click on the Diagram tab to select the required Shape and add it to the Diagram.

2. In the Properties section of the Diagram tab, enter the desired information into the Name and Title fields.

3. Click on the Validate your Changes button to save your new description to the Shape.

Create a Connection between Shapes: Add Alternative Branches (Simple)

There are three ways to create a connection between two shapes. Each method is described below.

To Create a Connection Between Two Shapes, Either:

The Shape will be highlighted by a solid border to indicate that it has been selected.

A Connector linking the Shape to your mouse pointer will appear.

The linked Connector follows the mouse pointer. The Connector will turn red when encountering Shapes that cannot be connected to, and green with those Shapes that it can.

The Connector will link the two Shapes, indicating that a connection between the two has been made.

1. Select the first shape by clicking on it.

2. Click on a Connector from the Shapes Menu pane.

3. Move your mouse pointer to the Shape you would like to connect to (target Shape).

4. Click on the Canvas to end Shape selection.

OR

The Shape will be highlighted by a dashed border to indicate that it has been selected.

A Connector will link the two Shapes, indicating that a connection between the two has been made.

1. Click and hold (long-click) on the first Shape to select it.

2. Double-click on the target Shape.

OR

A Connector will link the two Shapes, indicating that a connection between the two has been made.

1. Hold down the Shift key and click on the first Shape to select it.

2. Double-click on the target Shape.

For Shapes that are not rectangular in nature, Connectors will connect to the Shape's boundary, and not directly to the Shape itself.

 

Create a Connection between Shapes: Add Alternative Branches (Multiple)

There are three ways to create connections between multiple Shapes. Each method is described below.

To Create a Connection Between Multiple Shapes:

The Shape will be highlighted by a solid line to indicate that it has been selected.

Each additional Shape will be highlighted with a dashed border to indicate Multiple Selection Mode.

Connectors will link the Shapes, indicating that connections have been made between them.

1. Select the first shape by clicking on it.

2. Hold down the Shift key and click on the next shape.

3. Double-click on the final target Shape to end the multiple selection.

OR:

The border of the Shape will be highlighted with a dashed border to indicate that it was been selected.

Each additional Shape will be highlighted with a dashed border to indicate Multiple Selection Mode.

Connectors will link the Shapes, indicating that connections have been made between them.

1. Select the first shape by clicking and holding on it (long-click).

2. Click on the extra Shapes required.

3. Double-click on the final target Shape to end the multiple selection.

OR:

Each Shape will be highlighted with a dashed border to indicate Multiple Selection Mode.

Connectors will link the Shapes, indicating that connections have been made between them.

1. Press and hold down the Shift key.

2. Click and drag your pointer over the area containing the Shapes to be selected.

3. Once you are happy with the Shapes selected, release the Shift key stop dragging across the area.

4. Double-click on the final target Shape to end the multiple selection.

For Shapes that are not rectangular in nature, Connectors will connect to the Shape's boundary, and not directly to the Shape itself.

 

Delete Shapes from the Diagram

To Delete a Single Shape or Connector from your Diagram:

The Clear Shape icon will display:

The Shape or Connector is deleted.

1. Select the Shape or Connector.

2. Click on the Clear Shape icon

To Delete Multiple Shapes or Connectors from your Diagram:

The Clear Shape icon will display.

The Shape or Connector is deleted.

1. Select the necessary Shapes or Connectors.

2. Click on the Clear Shape icon.

To Delete a Swimlane from your Diagram:

The Swimlane will be deleted but the Shape[s] attached to it will remain.

1. Select the Swimlane and proceed to delete as with a Shape or Connector.

Assign Swimlane Elements to your Process

It is possible to group or assign various aspects of your diagram to a particular Swimlane element. Assigning Shapes to a Swimlane can provide clarification about which organizational roles or functions are responsible for which parts the process being captured in your diagram.

To Assign a Shape[s] to a Swimlane:

1. Click on the required Shape[s] that you would like to assign.

2. In the Selection Menu Pane, a Swimlane Sub-menu pane will appear. The sub-menu will use the same title as the element placed inside the Swimlane category in the Diagram Template Editor. In the example below, the Swimlane element is 'Organization'.

3. You will be prompted to either search for or create a the new group to assign the Shapes to:

The previously selected Shapes will be assigned to the new group.

1. Select (or create) the desired group.

To Change the Name of a Group/Swimlane Element:

A solid border will appear around the element Shape (Organization grouping).

The Swimlane (Organization) sub-menu will appear in the Editor Menus area.

The new description will be added to your Shape.

1. Select the Swimlane element by clicking on it.

2. Enter the new element name into the properties field provided.

3. Click on the green Validate your Changes button to save your new description to the Shape. Alternatively, press the Enter key on your keyboard.

To Remove a Swimlane from your Diagram:

A solid border will appear around the element Shape (Organization grouping).

The Swimlane (Organization) sub-menu will appear in the Editor Menus area.

The Swimlane element is removed from your Diagram.

1. Select the Swimlane element by clicking on it.

2. Click on the Clear Shape icon located in the in the Properties section of the pane:
 

Change the Appearance of your Diagram

When creating your Diagram, it is possible to adjust the both the orientation of the Diagram and the Theme used.

To Open the Appearance Options:

The Appearance Menu options will display:

1. Open your Diagram Draft and click on the Appearance Menu Pane.

2. Select the appropriate option.

To Change the Orientation of your Diagram:

Alternatively;

The Diagram will change orientation accordingly.

1. Open the Appearance Menu Pane.

2. Click on the Left to Right icon to display your Process Diagram from left to right across the screen:

3. Click on the Top to Bottom icon to display your Process Diagram from the top to the bottom of the screen:

To Change the Theme Used by your Diagram:

A list of Themes available for selection will display in the Theme sub-menu.

The new Theme will be applied to your Diagram.

1. Open the Appearance Menu Pane.

2. Select your chosen Theme by clicking on the relevant pane:

Exit eModeler

To Exit the Application:

The screen returns to the previous Process Summary page.

1. Click on the Close Edit Mode icon at the top of the screen:
 

Related Documents

The document was helpful.

Select Rating

I easily found the information I needed.

Select Rating