Designs

Designs are the visual representation of documents.

They are identified by name which can include a namespace (colon separated as in ae:my-example). The name signifies as what to render a document.

For example, a common design name is title, which renders a document as a title. Usually this means render just the content of the name field of the document. Another example is card-content, which renders a document as one would inside a card or tree-item.

Designs are documents of type design-form and consist of a template, style,and controller script.

Usage

In order to use a design in html you would use the following syntax:

<!-- Render a specific document as a title -->
<ae-design name="title" document-id="my-document-id"></ae-design>

<!-- Render a document as linked to by a reference field -->
<ae-design name="title" :document="data.myRefField"></ae-design>

Parameters

Designs can have parameters. These are passed as attributes to the design element. For example:

<ae-design name="title" document-id="my-document-id" :param-my-param="true" param-another="Fixed Value"></ae-design>

These parameters are available in the controller script of the design and its html template under the object params where each attribute is camel-cased. In the above example:

// controller script (any function inside)
myFunction() {
  console.log(params.myParam); // true
  console.log(params.another); // Fixed Value
}

Or in the design template:

<div v-if="params.myParam">
  <p>{{params.another}}</p>
</div>

Lookup Rules

As designs are identified by name, the lookup rules are are more complex than for layouts, but similar to controls. The lookup rules are as follows:

1. If the form of the document being rendered has a child document of type design-form with the same name as the design, then that document is used as the design.
2. With the Form of the document as a starting point, we look for a folder on each level to each successive parent with the type design-folder and look for a child document of type design-form with the same name as the design.
   1. If the current ancestor we investigate is a form-folder we look through any referenced design-folder from the styling section of the form.
   2. If the current ancestor we investigate is an application-form we look through any referenced design-folder from the styling section of the application.
   3. If we reached the root we investigate the root form and look through any referenced design-folder from the styling section of the root.
3. At last we lookup the design in the Fallback Design folder (id:fallback-designs) of the system folder.

Lookup Graph

This flowchart visually represents the lookup rules for designs.

flowchart TB__NEWLINE__ start("Look for design with namespace and name") --> checkDesignForm("Check for matching 'design-form' as child of the document's form")__NEWLINE__ checkDesignForm -->|Found| useDesign__NEWLINE__ checkDesignForm -->|Not Found| checkNextAncestor__NEWLINE__ checkNextAncestor("Look in next ancestor.") --> checkType("Check type of current ancestor")__NEWLINE__ checkType -->|form-folder| checkInStylingSection__NEWLINE__ checkType -->|application-form| checkInStylingSection__NEWLINE__ checkType -->|root| checkInStylingSection__NEWLINE__ checkType -->|unknown| checkNextAncestor__NEWLINE__ checkType -->|none| fallbackDesign__NEWLINE__ checkInStylingSection(Look at all 'design-folder's from styling section) --> |Found| useDesign__NEWLINE__ checkInStylingSection --> |Not Found| checkNextAncestor__NEWLINE__ fallbackDesign("Look in system fallback design folder") -->|Found 'design-form'| useFallbackDesign("Use Fallback Design")__NEWLINE__ fallbackDesign -->|Not Found| nonFound("End: No design found")__NEWLINE__ useDesign --> endDesignApplied("End: Design Applied")__NEWLINE__ useFallbackDesign --> endDesignApplied