Page layout — Rich text

Flow components let us split our app UI into independent, reusable pieces. A page layout in Flow has the following components:

Content – Hidden | Presentation | List | Outcomes | Image
Input – Input | Radio | Checkbox | Toggle | Text | Rich Text | Combobox
Data – File Upload | Table | Files | Tiles
Charts – Bar | Line | Pie | Doughnut | Polar Area

Let’s take a look at the rich text component.

Rich text

The rich text component lets us accept rich-text from users. We use the WYSIWYG TinyMCE editor for our apps.

We drag and drop the rich text component to a container in the page layout. Like other components, this opens a configuration panel on the right-hand-side that lets us customize the component.

The rich text component has a nifty hint option, that lets us tell our users the kind of input we are expecting.

This is what the screen looks like when we have configured the rich text component.

This is how the component will render in the app:

Of course, we are using the plain vanilla Flow player to render the app; so there are no UI elements, flashy or otherwise, yet.

Goody bag
  1. Sample flow – https://flow.manywho.com/c5a50df2-f24b-4342-9fbd-1c91747ac0cf/play/default/?flow-id=c0e813bf-34e7-4678-8b80-ef69a6e808d2
  2. Sample package – https://s3.amazonaws.com/mw-documentation/flow-examples/content.json