2015-12-19 14:52:17 +01:00
|
|
|
title: Flow Block Models
|
|
|
|
---
|
|
|
|
summary: Explains how to model flow blocks.
|
|
|
|
---
|
|
|
|
body:
|
|
|
|
|
2015-12-20 20:34:12 +01:00
|
|
|
To use [Flow :ref](../../content/flow/) you need to define flow block models.
|
2015-12-19 14:52:17 +01:00
|
|
|
If you are not familiar with Flow yet, you should read the [Introduction
|
2015-12-20 20:34:12 +01:00
|
|
|
Documentation](../../content/flow/) to Flow first.
|
2015-12-19 14:52:17 +01:00
|
|
|
|
|
|
|
## Defining Models
|
|
|
|
|
|
|
|
Flow block models work pretty much exactly the same as [Regular Models
|
|
|
|
:ref](../). The differences are mostly minor and of cosmetic nature. They
|
|
|
|
are stored in the `flowblocks/` folder and are ini files just like models.
|
|
|
|
|
2016-05-03 16:00:36 +02:00
|
|
|
Instead of using `[model]` as section, the section is called `[block]`.
|
2015-12-19 14:52:17 +01:00
|
|
|
|
|
|
|
Here a very basic flow block model `flowblocks/text.ini`:
|
|
|
|
|
|
|
|
```ini
|
|
|
|
[block]
|
|
|
|
name = Text Block
|
|
|
|
button_label = Text
|
|
|
|
|
|
|
|
[fields.text]
|
|
|
|
label = Text
|
|
|
|
type = markdown
|
|
|
|
|
|
|
|
[fields.class]
|
|
|
|
label = Class
|
|
|
|
type = select
|
|
|
|
choices = default, centered
|
|
|
|
choice_labels = Default, Centered
|
|
|
|
default = default
|
|
|
|
```
|
|
|
|
|
|
|
|
This should be self explanatory. One thing that is different about blocks
|
|
|
|
compared to regular models is that they support the `button_label` attribute
|
|
|
|
which an be used to customize the label of the button that adds blocks to
|
|
|
|
a flow.
|
|
|
|
|
|
|
|
## Templates
|
|
|
|
|
|
|
|
Now that we have a model for our flow block, we need to create a template
|
|
|
|
for it. When a flow block is added to a Flow, it will automatically
|
|
|
|
render it by default through the template `blocks/NAME.html` (so in our
|
|
|
|
case `blocks/text.html`). Here is a suitable template for this:
|
|
|
|
|
|
|
|
```html+jinja
|
|
|
|
<div class="text-block text-block-{{ this.class }}">
|
|
|
|
{{ this.text }}
|
|
|
|
</div>
|
|
|
|
```
|
|
|
|
|
|
|
|
If you need to access the page the flow is used by, you can use the `record`
|
|
|
|
template variable.
|