Breadcrumbs

CSS

The CSS Element

Element

css.png

Function

The CSS element offers the possibility to save your on design templates, for example to define font and font size or to use your own images and logos in your forms. The CSS element is created in the Project Editor.

Connections

Elements, that are saved to the work area of the Project Editor cannot be linked via connections.

Example

In the project ACME Procurement the CSS element ACME Master CSS was created alongside the EPC Procurement Process,  the associated app projects Procurement and Catalog and the ACME Organization Chart.

Within ACME Master CSS layout instructions regarding the design of the procurement process form templates are saved. 

css_example.png

Configuration Options

Edit the element via the Edit Sidebar.

css_name.png


Name

Name of the element within modeling.

model_id.png

ID

The read-only field contains the model ID of the element. Designers can use the ID for example in the search to link the element in other models.

epc_description.png

Description

A commentary field for the modeler. Its content is invisible to users and its sole purpose is internal documentation.

epc_hashtags.png

Hashtags

Possibility to insert your own key terms . The leading hashtag sign # (hash) will be inserted automatically. Use the spacebar to insert multiple hashtags:

hashtag_example.png?version=2&modificationDate=1550039322000&cacheVersion=1&api=v2

One hashtag may be issued for multiple elements:

hashtag_search.png?version=2&modificationDate=1550039386000&cacheVersion=1&api=v2

Empty:

css_empty.png

Containing Content:

css_content.png

CSS

By clicking on the gear wheel an editor opens, where you can record your CSS directives:

css_editor.png

The color of the gear wheel shows, whether an element is empty (light grey) or if content has already been saved (dark grey).

Double-click on the element to open the editor.

Editor CSS

button_save_blue.png

Use the Save button in the pop-up window to save changes.

button_cancel.png

You can leave the pop-up window via the Cancel button.

Caution: In that case, changes will not be saved!

Using CSS Templates

During creation of a new app project, three CSS templates are generated automatically, which are available for immediate use in your apps:

  • CSS Red

  • CSS Blue 

  • CSS Gray

The templates contain the CSS instructions for form presentation. The name of the app project is used as prefix which allows you to easily find relevant CSS elements in the hit list of the search function.

Example: Creation of an App Project Directory

The new app project Directory is created:

css_app_project_directory.png

In the app project the following three CSS templates will be available:

  • Directory - CSS Red

  • Directory - CSS Blue 

  • Directory - CSS Grey

css_templates.png

The templates can be assigned directly to the Reference Model:

css_reference_model.png

The Reference Model already contains a small EPC...

css_standard_epc.png

... with Form Step 1:

css_standard_form.png

When executing the app, all layout instructions saved in the CSS template will be used for this form:

Template CSS blue

blue_form.png

Template CSS red

red_form.png

Template CSS grey

grey_form.png

As a standard both the Reference model and the Overview model of newly created app projects are assigned the CSS template CSS Blue.

If no CSS was assigned to an EPC model, then the forms will be executed with layout default settings:

css_bpaas_standard.png
Related Documentation: