Chat now with support
Chat with Support

erwin Evolve 2020.2.0 - User Guide

erwin Evolve 2020.2 User Help Guide
erwin Evolve 2020.2 User Help Guide
erwin Evolve 2020.2 User Help 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 Evolve Suite Addendum

Custom CSS & JavaScript

Custom CSS & JavaScript

Evolve allows you to extend its functionality and styles by creating your own CSS classes and JavaScript methods which can be used within the layouts and behaviors you create.

Creating a Custom File

Location: \webDesignerStatics\webDesigner\custom\{yourFolder}

          1. Create a folder in the location above

          2. Place the CSS and / or JavaScript files of the following files inside (See the CSS or JavaScript sections below)

          3. Open Evolve Designer for the site you’re making the changes to

          4. Expand down to the model node in the left hand tree

          5. On the right hand side Select {yourFolder} name from the list of ‘Deploy Custom Site’

          6. From the ‘Advanced’ tab select the ‘Save & Deploy Site’ button

          7. Hard refresh your browser by pressing Ctrl + F5 to pick up your changes

CSS

Language: CSS

File Extension: .css

Location: \webDesignerStatics\webDesigner\custom\{yourFolder}\css

Reference: www.w3schools.com/css/

The CSS file created should be named main.css, this file is added to the Evolve style list after the standard Evolve styles, so will overwrite any existing classes of the same name. This allows you to tweak any UI styling to suit your specific needs by simply adding a class with the same name to the main.css file.

JavaScript

Language: JavaScript

File Extension: .js

Location: \webDesignerStatics\webDesigner\custom\{yourFolder}\js

Reference: www.w3schools.com/js/

The JavaScript file created should be named main.js, any custom JavaScript you wish to be made available within Evolve should be added to this file, which will be included when Evolve is run.

Using Custom Images

Using Custom Images

To use custom images in Evolve:

          1. Go to Site/bin/webDesigner/custom (if it doesn’t exist, create it)

          2. Create a folder inside there with the name of your customization

          3. Inside the customization folder create a folder named 'images'

          4. Inside 'images' you must add the new image files in the same position and the same name as the file you want to replace in Content/images

          If you want to replace Content/images/logos/logo.png you must name your file logo.png and put it in Site/bin/webDesigner/custom/images/logo/logo.png

          5. Run Evolve Designer and select the Model Deployment Node

          6. In the drop down next to Deploy Custom Site select the name you set in step 1

          7. You must run Themes & Pictures then Save & Deploy for changes to take effect.

Creating Custom Layouts

Creating Custom Layouts

What Files Do You Need?

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

Layout File

Style File

Layout Configuration File

Layout File

Language: HTML, JavaScript, JQuery

File Extension: .js

Location: C:\Casewise\evolve\Site\bin\webDesigner\custom\client\libs\cwLayouts\

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

The layout file contains the code that describes how the content on the page should be displayed. The methods are called when the page is being drawn.

         

(function(cwApi) {

 

var myLayout = function(options) {

cwAPI.extend(this, cwAPI.cwLayouts.CwLayout, options);

this.drawOneMethod = myLayout.drawOne.bind(this);

cwApi.registerLayoutForJSActions(this);

};

 

myLayout.drawOne = function(output, item, callback, nameOnly) {};

 

cwApi.cwLayouts.myLayout = myLayout;

 

}(cwAPI));

The file should be structured as followed:

The .drawOne Method

The drawOne method should contain all the code to describe how one object should be displayed on a page.

Parameters

output

This parameter contains an array of the HTML structure to be output. Each object that is to be displayed should be added as a HTML list item (<li>) containing the information and / or HTML structure of how you want that object to be displayed on the page.

myLayout.drawOne = function(output, item, callback, nameOnly) {

output.push("<li class='cw-item'><div>",

this.getDisplayItem(item, nameOnly),

"</div></li>");

};

Here is an example of how to display the information as a simple list.

item

This parameter is an object that contains all the information available to you for the object that is being displayed including the current user’s rights to update and delete the object, for a more detailed look at the information contains in this object. See Data Structure: item for an example of the data structure.

callback

This parameter is no longer used so will always be ‘undefined’.

nameOnly

This will be passed as true, false or undefined. If true the output should not contain a link to any other page, if false or undefined, the output will usually link to the matching object page.

Style File

Location: C:\Casewise\evolve\Site\bin\webDesigner\custom\client\libs\cwLayouts\

A style file should accompany the layout 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.

Layout Configuration File

Language: JSON

File Extension: .config.json

Location: C:\Casewise\evolve\Site\bin\webDesigner\custom\client\layouts\

Reference: www.w3schools.com/json/

{

"name" :

"myLayout",

"display-name" : "My Layout",

"description" : "This is a new layout created by me",

"js-class-name" : "myLayout"

}

The layout configuration file is a JSON file that sets properties for the layout. It is used by Evolve Designer to make the layout available for selection when configuring Evolve, the display-name and description are displayed when making a layout selection of a node. The js-class-name must match the name of your new layout.

Custom Visualizations

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

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.

          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.

Related Documents

The document was helpful.

Select Rating

I easily found the information I needed.

Select Rating