You can make your HTML dynamic by using attribute directives as you would in modern web frameworks. When typing most of them Implementation Assistant will notify you to auto-create (if don't exist) required Commands and Providers or to install a Widgets. The vocabulary here is simple, attribute [gc-as] tells what it is and other [gc-*] attributes are parameters. Note: For any naming attributes use camelcase e.g. for a [slot] you would use [gc-name="myAwesomeSlot"].
Any page requires a container which wraps its content and it is done by using layout directive. Inside the layout you don't have access to store nor to Commands. If that's what you need see Slot. However, several global variables can be accessed:
mediaFiles - media files by their namesbootstrap - if imported, bootstrap classesfa - if imported, font awesome classesisCalledByPrerender - tells whether the HTML piece is called by prerederermyAwesomeTheme, it'll be accessible as variable in the slot. See Extended Tags to see how you can make use of these variables.global.* - window object combined with Global Stylesgc-as="layout"
A logical UI piece which has its scoped CSS and is extracted to dedicated file is called slot. It requires a unique (within page) camelcase gc-name. Whatever is in slot gets access to a store, commands and other useful variables. Here is a list:
actionResults - store i.e. provider and command results by their namesactions - commands by their namesmediaFiles - media files by their namesstyles - local styles scoped just to this slotbootstrap - if imported, bootstrap classesfa - if imported, font awesome classesuiSignals - signal getters and setters. See UI signalsisCalledByPrerender - tells whether the HTML piece is called by prerederermyAwesomeTheme, it'll be accessible as variable in the slot. See Extended Tags to see how you can make use of these variables.global.* - window object combined with Global Stylesgc-as="slot"
gc-name="${slotName: string}"
Very similar to slots, except they don't have content. They are logical UI piece shared accross pages. If you type one, it'll automatically apear under Reusable Slots. It then can be edited in a separate HTML editor and it has its own scoped CSS as well as access to global variables slots have.
gc-as="slot"
gc-name="${slotName: string}"
Display the below div if provider shouldDisplaySpan returns true'thy:
Display the below div if provider getUser returns an object with a property isAuthenticated set to true'thy:
Display the below div if command showPanel returns true'thy:
Display the below div if result of command setUserEmail equals to a field email of provider getUser:
Display only content of the below fragment if provider shouldDisplayFragment returns true'thy:
Display the below span if item of a loop over provider getProducts is isOnSale property set to true'thy:
Display the below span if item of a loop over provider getProducts has a property id that equals to result of command setActiveProduct:
Display the below div if props.isConditionMet evaluates to true. See Extended Tags and UI signals:
Apply class coolClass on the span below if signal uiSignals.activeSomething matched the condition. See Extended Tags and UI signals:
gc-as="conditional"
gc-command="${commandName: string}" || undefined
gc-provider="${providerName: string} || undefined"
gc-test-field="${fieldName: string}" || undefined
UI Signals give you local state which can be used to update UI when it changes. They are scoped to a [slot] they are in. Just use global uiSignals variable as below.
On user click, set signal named activeSomething:
Use signals in conditionals See Extended Tags and conditionals:
Use signals to apply classes. See Extended Tags:
Display image with a hardcoded src:
Image taken from a property image of provider getProduct. Remember to provide example src, also see record field presenter:
Display image taken from a result of provider getProductImage. Rememver to provide examplesrc. Remember to provide example src, also see provider result presenter:
Display image taken from property image of an item when looping over provider getProduct. See list item presenter and list field presenter:
You can display images uploaded to media files pane by using Extended Tags. Since generated code uses Webpack's responsive loader, you can serve the image low quality placeholder for prerendering and otherwise src. Depending on the file mimetype, you'll access sources of *.png, *.jpg, *.jpeg, and *.gif using src (or placeholder) and others by simply mediaFiles['some-file.svg']:
slot unless it's a hardcoded src or mediaFiles imageDisplay video with a hardcoded src:
Display video taken from property video of provider getProduct. See record field presenter:
Display video taken from a result of provider getProductVideo. See provider result presenter:
Display video taken from property video of an item when looping over provider getProducts. See list item presenter and list field presenter:
You can display videos uploaded to media files pane by using Extended Tags. Just access your file source by global variable mediaFiles by its name. Note that source tags won't render when prerendering your HTML so you don't need to use isCalledByPrerender to prevent prerendering sources:
slot unless it's a hardcoded src or mediaFiles videoDisplay message of error SomeError thrown by any command. Remember to provide example message:
gc-as="errorPresenter"
gc-error="${errorName: string}"
gc-custom-name || undefined
Display property sku of an object returned by provider getProduct. Remeber to provide example text:
gc-as="recordFieldPresenter"
gc-provider="${providerName: string}"
gc-field="${fieldName: string}"
Display a result of provider getProductSku. Remember to provide example text:
gc-as="providerResultPresenter"
gc-provider="${providerName: string}"
Display a result of command setSomeValue. Remember to provide example text:
gc-as="commandResultPresenter"
gc-command="${commandName: string}"
Display a list of countries taken from provider fetchCountries which returns an array of objects containing property name. Remember to provide example text in the list field presenter.
Whatever is inside it, it gets access to two variables called: providerName + 'Item' and providerName + 'Index' e.g. fetchCountriesItem and fetchCountriesIndex which represent respectively each iteration item and index within the array. See Extended Tags and var presenter.
Notice the use of fragment which allows to render only its content:
Display a dropdown of countries from taken from provider fetchCountries which returns an array of objects containing property name. Remember to provide example text in the list field presenter.
Notice how you can combine different directives and Extended Tags:
This particular directive allows you to auto-generate required provider from HTML if one doesn't exist yet. So, imagine you paste-in a piece of static HTML and add directives only to the first item of the list. All the data will be parsed and used within auto-generated provider.
So this:
will be turned into provider fetchCountries:
gc-as="listItemPresenter"
gc-provider="${providerName: string}"
Display a property name of an item while looping over provider fetchCountries. Use it inside list item presenter. Remember to provide example text. Notice the use of fragment which allows to render only its content but you can use any valid tag if you whish:
gc-as="listFieldPresenter"
gc-provider="${providerName: string}"
gc-field="${fieldName: string}"
Display variable fetchCountriesItem given it's accessible i.e. it's inside a directive which exposes the variable. There are two directives which do so; slot and list item presenter:
Here is more advanced example. Notice you can use fragment to display just its content. Remember to provide example value:
gc-as="varPresenter"
gc-name="${varName: string}"
Display widget form with a role myForm which makes it distinctive within page or reusable slot:
Note: gc-role is used as distinctive identifier to allow using the same widget multiple times on the page or reusable slot and style them independently. There role is scoped to a page or reusable slot where the widget is inserted.gc-as="widget"
gc-name="${widgetName: string}"
gc-role="${roleName: string}"
gc-role[nestedWidgetName: string]="${nestedRoleName: string}"
To display link to a page somePage. Note that text in the a tag will be replaced with what's specified in the page's gc-as="navName" meta tag:
Here is a link:
You can customize its text this way:
gc-as="pageLink"
gc-page="${pageName: string}"
gc-custom-name="${customName: string}" || undefined