지금 지원 담당자와 채팅
지원 담당자와 채팅

erwin Evolve 2023.1.0 - User Guide

erwin Evolve 2023.1.0 User Help Guide Legal Notices 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 Enhanced erwin Evolve Plugins Workflow Explained Social Interaction Features Questionnaires Reference Configuration and Administration Customizing Your Site Troubleshooting Upgrading

Custom Visualizations

Custom visualizations currently require changes to be made to server side code, so an Evolve development environment to develop a new visualization and a new build of Evolve are required.

What Do You Need?

The setup of a new custom visualization requires one of each of these files to be placed in the correct locations so they are recognized by Evolve.

  • Visualization File

  • Style File

  • Evolve Designer Configuration File

It also require the following file to be updated with a reference to the new visualization.

  • Visualization List File

    Icon

Description automatically generated

    A rebuild of Evolve is required for a new custom visualization to be used in Evolve Designer.

 

Visualization File

Language: HTML / JavaScript / JQuery

File Extension: .js

Location: \webDesignerStatics\webDesigner\custom\client\libs\cwBehaviours\

Reference: www.w3schools.com/html/  www.w3schools.com/js/  www.w3schools.com/jquery

The visualization file contains the code that describes how the visualization will be displayed on a page.

(function () {

var myVisualization = function () { };

myVisualization.setup = function (properties, allItems, searching) { };

cwBehaviours.myVisualization = myVisualization;

}());

The file should be structured as followed:

The setup Method

$('div.' + properties.NodeID).html(“HTML String”);

The setup method is the first method that is called when the visualisation is loaded, it should contain any code that will manipulate the data available and build up a HTML string the UI for the visualisation you wish to create. The HTML string should then be appended to the page’s DOM like so:

Parameters

properties

This parameter contains all the information for the visualisation you have created. You will need this information in the next section to access the correct data list from the allItems parameter. See DataStructure: properties for an example of the full data structure.

allItems

allItems[properties.NodeID];

This parameter contains the list of object and their data for each page in Evolve, to access the data for the page you’re coding against use the link of code below.

The list will contain all the objects and it’s information that should be displayed on the page, when searching this list will be updated to show only objects that match the search criteria. See Data Structure: allItems for an example of the full data structure.

searching

This is a Boolean parameter that tells you whether the page is currently being searched using Evolve’s in-page searching capability. You do not need to do anything special to have your page be searchable, this is provided as default by default.

Style File

Location: \webDesignerStatics\webDesigner\custom\client\libs\cwBehaviours\

A style file should accompany the visualisation file in the same directory defining the styles used in the HTML output. See Style Development for more information on how to produce this and the options available in Evolve.

EvolveDesigner Configuration File

Language: C#

File Extension: .cs

Location: \webDesigner\Sources\Nodes\Behaviours\

 

class cwWebDesignerTreeNodeBehaviourMyVisualisation: cwWebDesignerTreeNodeBehaviour

{

public cwWebDesignerTreeNodeBehaviourMyVisualisation(

cwWebDesignerGUI cwWebIndexGui,

cwPSFTreeNode parent)

: base(cwWebIndexGui, parent, "myVisualisation"

wWebDesignerTreeNodeBehaviour.CategoryBehaviourOtherCharts)

{

updateText("My Visualisation");

}

 

public override bool checkNodeStructureCustom()

{

return true;

}

}

Reference: msdn.microsoft.com/en-gb/vstudio/hh341490.aspx

Visualisation List File

Language: C#

Location: \webDesigner\Sources\Libs\cwWebDesignerBehaviourManager.cs

Reference: msdn.microsoft.com/en-gb/vstudio/hh341490.aspx

The Visualisation List File contains a list of the visualizations available in Evolve by linking to their configuration file (described above), so any new visualisation should be added to this list so EvolveDesigner can recognise it and make it available for use.

public cwWebDesignerBehaviourManager(cwWebDesignerGUI webDesignerGui, cwWebDesignerTreeNodeLayout parentLayout)

{

this.AddBehaviour(new cwWebDesignerTreeNodeBehaviourAccordion(webDesignerGui, parentLayout));

this.AddBehaviour(new cwWebDesignerTreeNodeBehaviourGoogleMap(webDesignerGui, parentLayout));

this.AddBehaviour(new cwWebDesignerTreeNodeBehaviourMyVisualisation(webDesignerGui, parentLayout));

this.SortBehaviours();

}

The line of code should be added as the example in red (below) shows.

Further Development

Layout Restriction

this.allowedLayouts.Add("Layout Name");

You can restrict the layout your visualisation can be attached to in EvolveDesigner by adding an extra line of code in the EvolveDesigner Configuration File. The following line of code should be added for each layout you will allow your visualisation to be attached to.

Additional Properties

Object Properties

If you require extra properties for the objects that are being provided to you, this can be configured in Evolve designer.

  1. Load EvolveDesigner with the model and site you’re configuring.

  2. Expand the tree for the Index page you have attached your visualisation to and select the object type. The example below shows this for a process object type.

    A computer screen shot of a computer

Description automatically generated

  3. On the right hand side select the additional properties you require in your visualisation, these will then be available in the allItems properties payload. See Data Structure: allItems for an example of the data structure.

    A screenshot of a computer

Description automatically generated

Data Structure: allItems

{

project1: Array[4]

0 {

accessRights {

CanDelete: true

CanUpdate: true

}

associations { }

iName: null

iObjectAccessRights: Object

iObjectTypeScriptName: ""

iProperties: Object

label: "Object Name"

layoutName: "cwLayoutEmpty"

name: "Object Name"

nodeID: "project1"

objectTypeScriptName: "project"

object_id: 23

properties {

name: "Object Name"

}

}

1: Object

2: Object

3: Object

4: Object

project2: Array[17]

}

Data Structure: item

{

accessRights {

CanDelete: true

CanUpdate: true

}

Associations {

iName: null

}

iObjectAccessRights {

iObjectTypeScriptName: ""

}

iProperties {

label: "Object Label"

layoutName: "myLayout"

name: "Object Name"

nodeID: "diagram"

objectTypeScriptName: "diagram"

object_id: 1234

}

properties {

cwaveragerating: 0

exportflag: 0

name: "Object Name"

}

}

Data Structure: properties

{

Behaviour {

AuthorizedLayouts: Array[0]

JSMethodName: "cwCostBenefit"

Name: "My Visualisation"

Options: Object

node_name: "My Visualisation"

}

LayoutName: "empty"

LayoutOptions {

DisplayPropertyScriptName: ""

HasLink: true

LayoutID: ""

}

NodeID: "project1"

ObjectTypeScriptName: "project"

PageName: "index_projects_cb"

PageType: 0

ParentNodeID: null

TabID: null

}

관련 문서

The document was helpful.

평가 결과 선택

I easily found the information I needed.

평가 결과 선택