roadiejs-import
RoadieJS
A plugin forA toolbox of widgets, elements and API endpoints from which to build user interfaces.
Contents
API
renderTemplate
Returns HTML representing an for a specific ui
element.
- May contain HTML5 attributes.
- To work as intended, the returned HTML requires at least Bootstrap CSS.
- A future enhancement will be to support a
format
parameter to so a JSON representation can be requested instead of HTML (for use with mobile apps)
Request
Name | Notes |
---|---|
uiId |
The id of a ui element defined in the blueprint. |
Response
Status 200
- The body of the response will be HTML representing the
ui
element identified in the request.
renderActivity
Much the same as renderTemplate
, except here the uiId
is inferred from a flow/activity instead of being explicitly provided.
- Designed to work in-conjunction with
immediatePendingActivityId
fromroadiejs-flow
.
Request
GET
/ui/:flowId/:activityId
Parameter | Notes |
---|---|
flowId |
A system-generated id that uniquely identifies a flow (e.g. flowId returned from createFlowFromRequest ). |
activityId |
The id of an activity within the specified flow. This activity needs to be of type showId (so that a uiId can be inferred, and subsequently rendered). |
Response
Status 200
- The body of the response will be HTML representing a
ui
element (theid
of which will be inferred via ashowUi
).
Elements
ui
Declares a new user interface, onto which child widget
elements can be added. The structure of widgets
under a ui
widget is typically tree-like.
Example
Config
Name | Type | Notes |
---|---|---|
title |
string |
A brief description that summarises what the user interface does. |
widget
A component used to build-up user interfaces. Can be a child of a ui
element, or another widget
element... the precise rules involved are specific to the widgets involved.
Example
Config
Name | Type | Notes |
---|---|---|
widgetType |
string |
Identifies the type of widget. Must be a supported widget name. |
- Only
widgetType
is a mandatory value across all widgets... all other values, and permitted child/parent elements, are specific to the widget's type. - Please see the Widgets section for widget-specific config and rules.
Activities
showUi
Once flow reaches an activity of this type, user-facing apps can derive a ui
element to display. It's the responsibility (e.g. via setDataAndProgress
and similar) of the app to update things so that the flow subsequently resumes.
Example
Config
Name | Type | Notes |
---|---|---|
uiId |
string |
The id of a ui element that should be displayed to the user. |
populateWizard
Calculates and sets all the necessary metadata to support the operation of a wizard
element.
Example
Config
Name | Type | Notes |
---|---|---|
targetActivityId |
string |
The id of an activity in the current flow, with a type of ui . |
Widgets
Layout/structure
container
Adds a Bootstrap container, onto which most elements can be added.
row
Adds a Bootstrap row, onto which most elements can be added. Rows need not be explicitly defined, and will be added automatically if a widgets parent isn't a suitable container.
jumbotron
Adds a Bootstrap Jumbotron, onto which boilerplate widgets are typically added.
wizard
Adds a wizard-style interface into the UI.
table
Adds a configurable table for applying CRUD operations to sub-documents.
modal
Defines a modal dialog for use with table
widgets and similar.
Boilerplate
heading
Adds a HTML <h1>
, <h2>
, <h3>
etc. elements.
paragraph
Adds a <p>...</p>
HTML element.
Inputs
text
Adds an HTML input
, configured to collecting string/text data.
number
Adds an HTML input
, configured to collecting numeric data.
Adds an HTML input
, configured to collecting an e-mail address.
date
Adds a UI component (with calendar tool) for collecting a date.
freeText
Adds an HTML editing UI component.
lookup
Adds a UI component for picking a single value from a list via Elasticsearch. Supports typeahead and other functionality.
select
Adds an HTML select
element.
Activity
submitData
Adds Cancel and OK buttons.
- Pressing OK will update the activity with form data, and attempts to continue (via
setDataAndProgress
) - Pressing Cancel will terminate the flow (via
stopFlowFromRequest
)