Tchater maintenant avec le support
Tchattez avec un ingénieur du support

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

Evolve Advanced Customization Guide

Advanced Customization

Welcome to the CW Evolve Advanced Customization Guide.

Who is this guide for?

This guide is for CW consultants or advanced users of Evolve - those interested in extending the basic capabilities of Evolve by creating custom layouts or visualizations, or changing the appearance of Evolve Sites.

What do you want to do?

Getting Started

To prepare for customizing Evolve, see

Get Ready For Development.

Layouts

To create custom layouts, see Creating Custom Layouts.

Visualizations

To create custom visualizations see Custom Visualizations.

CSS & JavaScript

To create custom CSS or JavaScript see Custom CSS & JavaScript

Styles

To learn about style development, see Style Development

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

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 ne

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

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.

Documents connexes

The document was helpful.

Sélectionner une évaluation

I easily found the information I needed.

Sélectionner une évaluation