MallaDocs
HomeQuickstartOpen Malla

Interactive page with workflows

Use variables and client workflows to filter a list, open a panel and react to clicks.

User guide
Intermediate25 min

You will build: A post list with a filter panel that opens on click, filters by author and confirms each change with a toast

Read first: Show data from an API

In this tutorial you make a page react to the visitor without writing code. You add page variables, open and close a panel with a click, filter a list with an expression, and run steps when a variable changes or the page loads. You start from the post list built in Show data from an API.

Interactive page with workflowsVideo coming soon. The written steps below cover everything.
Interactive page with workflows· 8 min

Add page variables

  1. Load more posts

    Open the page with the posts query and press Data at the bottom of the left sidebar. Select the posts query and change Path to /posts?_limit=30. The first 30 posts come from three authors, with userId 1, 2 and 3.

  2. Add a variable for the panel

    Next to Page variables, press + and choose Boolean. The variable is called isOpen and starts as false. It will say whether the filter panel is open.

  3. Add a variable for the filter

    Press + again and choose Number. Rename it to userId and leave the default value at 0, which will mean "all authors".

Open and close a panel

  1. Add the button and the panel

    Back on the canvas, add a Button above the list and set its Text to Filters. Under it, draw a frame named Filter panel with three buttons: All authors, Author 1 and Author 2.

  2. Show the panel only when it is open

    Select Filter panel. In Visibility, press the bind button next to Show when and type vars.isOpen. The panel disappears from the canvas, because isOpen is false.

  3. Add a click workflow

    Select the Filters button. In Events, keep Click and press Add workflow. The Logic workspace opens on a new client workflow whose trigger is a click on that button.

  4. Toggle the variable

    In Steps, press Add step and choose Set variable. Set Variable to isOpen and Value to !vars.isOpen. Each click now flips the value between true and false.

  5. Try it

    Press Run in preview. The Run log at the bottom shows the step, and the panel appears on the canvas. Run it again to hide the panel.

Checkpoint

Running the workflow shows and hides Filter panel on the canvas, and the Run log lists one Set variable step per run.

Filter the list

  1. Filter the items with an expression

    Select the collection list. In Collection list, press the binding next to Items and replace it with:

    js
    vars.userId === 0 ? queries.posts.data : queries.posts.data.filter(p => p.userId === vars.userId)

    When userId is 0 the list shows every post; otherwise it keeps only the posts of that author.

  2. Set the author on click

    Select the Author 1 button and add a click workflow in Events. Add a Set variable step with Variable userId and Value 1. Do the same for Author 2 with the value 2.

  3. Reset the filter

    Select All authors, add a click workflow and add a Reset variable step for userId. It puts the variable back to its default value, 0.

React when a variable changes

  1. Start a workflow on a variable change

    In the Logic workspace, press + (Add workflow) and choose Variable changes. In Trigger, set Variable to userId. This workflow runs every time the filter changes, whichever button changed it.

  2. Close the panel

    Add a Set variable step with Variable isOpen and Value false.

  3. Confirm with a toast

    Add a Show toast step. Next to Message, press Use an expression and type:

    js
    vars.userId === 0 ? 'Showing all posts' : `Showing posts by author ${vars.userId}`

    Set Variant to Success.

  4. Test the whole page

    Press ⌘↵ to preview. Click Filters, then Author 2: the panel closes, the list shows only that author's posts and a toast confirms it. Click Filters and All authors to see every post again. Press ⌘↵ to go back to editing.

Checkpoint

In the preview, choosing an author closes the panel, filters the list and shows a toast.

Page load and navigation

  1. Greet visitors on page load

    Press + (Add workflow) and choose Page load. Add a Show toast step with the message Use Filters to pick an author and the variant Info. It runs once each time the page opens.

  2. Send visitors to another page

    Add a Contact us button under the list and give it a click workflow with a Go to page step. In Destination, pick one of your pages, type a path such as /contact, or paste a full URL.

    A button that only goes to a page does not need a workflow: set Target in its Link section instead. Use Go to page when other steps must run first, or when the destination depends on the result of a step.

  3. Publish

    Press Publish and try the staging page. Workflows run in the visitor's browser, so the panel, the filter and the toasts work on the live site.

Done

Your page opens a filter panel, filters the list by author, reacts to every change and links to another page.

What you learned

  • Page variables hold the state of the page; bindings such as Show when and Items read them.
  • Client workflows start on an element event, a variable change or page load, and run steps in order.
  • Set variable with an expression like !vars.isOpen toggles a value, and a filter expression narrows a list.

Read the guides behind this tutorial:

Client workflowsVisual logic that runs in the browser on clicks, submits, page load and variable changes.VariablesPage and site state that bindings read and workflows write, persisted in the URL or the browser.Workflow actionsEvery workflow step: what it does, where it runs and its parameters.Expression referenceOperators, scope variables, built-in fn functions and methods available in expressions.