Skip to main content

Flexible templates with prep-mode editability

Overview​

Slides can be made more flexible by creating a single, flexible slide layout and altering its appearance using additional user interface elements, visible only during prep mode. The UI elements save and retrieve a slide-specific context value summarising the choices made. When the slide is drawn outside prep-mode, it uses these values to change its appearance.


Method​

The basic technique is to define a reusable set of UI controls consisting of one or more user interface elements (dropdowns, radio buttons checkboxes etc.) that are visible only in prep-mode, and a handler that takes the output of that UI and changes the layout of the slide, generally using css classes to change visibility.

The changes made to the slide should only hide elements, not add them to the slide. The slide itself should be laid out with all possible elements present. This is required if the slide contains editable elements such as text fields or images, as these must form part of the markup of the slide before the sliderendered event fires.

The constructor of the component would have one of two behaviours:

In prep mode, the user interface is drawn. An update handler is fired when choices are made, to provide live feedback to the user.
Outside of prep mode, no UI is drawn. Instead, the component retrieves the saved value(s) from the context and uses them to change the slide layout with an update handler.

It should be possible to create a component that takes, as arguments:

  • a unique key to store the selected value(s) in the context (likely prefixed by slide id)
  • a list of UI elements and their choices
  • a single update handler that accepts the selected options as arguments, and uses them to affect the slide layout.

Further reading​

The API documentation on setting and retrieving a context value.