Designs: Viewing Documents

A design is a dynamic component specifically linked to a document. It renders the document’s data as HTML, styled and interactive. Designs are scoped to the document being rendered, making the document variable globally available within their templates and controllers.

• HTML Template: The structure of the rendered content using vue.
• Stylesheets: The CSS used to style the HTML.
• Controller: JavaScript logic for interactivity, executed on the client side.

How Designs Are Found

Every document in AEPPIC is associated with a form, and forms can have designs. The lookup process is a longer algorithm, but the basics are as follows:

1. Check under the document's form itself:
   • aeppic searches for a child document of type design under the form with a matching name.
   • For example, if the client requests a “text” design, it looks for a design document named text.
2. Fallback to defaults:
   • If no matching design is found under the form, aeppic looks in a number of fallback locations all the way to the system folder.
   • Inside the system folder always contains a number of fallback designs (e.g., text, page) that work for most documents.

Naming Conventions

The name of a design reflects what the document should be rendered as. E.g. a design named text should render the document as a text while and icon design should render the document as an icon.

Template variables

Designs have access to the document being rendered. Use

{{document}}

to access the JSON representation of the document or you can also use a shortcut directly to the data with

{{ data }}

The component

<ae-design> is the component used to render a document using a design. It takes a document and a list of names in order of preference to find the design to use.

<ae-design :document="document" :name="text, page"></ae-design>