03c - Your first panel — a Quick Start tutorial

This tutorial walks you through building a small but complete Workflow Assistant panel from scratch. By the end you will have placed a Field, an Action, and a Notification; configured the visibility checklist; written your first Lucene condition; saved, published, and verified the panel against a test user. About 15 minutes of work, with most of it spent reading rather than typing.

The example panel — Image details — is deliberately tiny: one tab, two sections, four components. It is the smallest panel that exercises every concept introduced in section 02 of this manual. Once you have built it, the rest of the manual is reference material on top of a real project.

Before you start

Tip: Read all ten steps before you start typing. The tutorial is shorter than it looks; once you know the shape, the steps go quickly.

Step 1. Start a new panel

Step 1. Open the Configurator plugin and sign in. You arrive on an empty editor canvas.

If your configuration already has a panel, you can either start a fresh one or use the existing one. For a clean tutorial, work on a fresh canvas if you can.

Step 2. Add a tab

The panel needs a tab before anything else can go on it.

Step 1. In the editor canvas, click Add tab (or the equivalent control if your version uses a different label).

Step 2. With the new tab selected, look at the options panel on the right. Set:

• Display name: Image details
• Audience: All (every user with the Required role will see this tab)

Step 3. Click Save changes in the header. Watch the saved-state indicator confirm the save.

Note: The audience setting is what controls which Assets users see this tab. All means everyone with the Workflow Assistant Required role. To restrict a tab to a subset, set the audience to one or more named Assets user groups — see 08 — Tabs and audience targeting for the full treatment.

Step 3. Add a section

A tab is a container; sections are where the work happens.

Step 1. Inside the Image details tab, click Add section.

Step 2. With the new section selected, set:

• Label: Asset facts
• Description: Read-only and editable details for the selected image

The label is what the user sees as a heading; the description is a short sentence below the heading explaining what the section is for. Both are optional, but writing both is the habit that separates a polished panel from a confusing one.

Step 3. Save changes.

Step 4. Add a Text field for Title

Step 1. Add a new row inside the Asset facts section. Choose Grid x1 (one column) for the layout.

Step 2. From the component palette on the left, drag a Text field into the new row.

Step 3. With the field selected, in the options panel set:

• Display name: Title
• Field name: start typing title. The autocomplete shows the available text fields in your Assets installation. Pick title from the list

Step 4. Leave every other option at its default for now. Save changes.

Note: The Field name is the technical metadata field in Assets that this Workflow Assistant field reads from and writes to. The autocomplete only shows fields that match the field type — for a Text field, only text-typed Assets fields appear. Pasting or typing a name that is not in the list will cause the panel to error when an end user opens it. Always pick from the autocomplete.

Step 5. Add a Text field for Credit

Repeat the previous step for the Credit field.

Step 1. Add a second row of layout Grid x1 below the Title row.

Step 2. Drag a Text field into it.

Step 3. Set:

• Display name: Credit
• Field name: credit
• Hint: The credit line as it should appear when this image is published

Step 4. Save changes.

You now have two rows in the Asset facts section: a Title field and a Credit field, both bound to real Assets metadata.

Step 6. Set visibility so the panel only applies to images

The example is called Image details for a reason. The components should appear when an image is selected, and stay hidden otherwise. The visibility checklist is the right tool.

Step 1. Select the Title field.

Step 2. In the options panel, find the Applies to visibility checklist.

Step 3. Click Clear to untick everything.

Step 4. Tick only Image. Leave No asset unticked — the field has nothing to read when nothing is selected.

Step 5. Repeat for the Credit field.

Step 6. Save changes.

Tip: Configure visibility on every component as you add it, before you move on. It is an extra five seconds per component and saves you from chasing “why isn’t it appearing?” surprises later.

Step 7. Add an Action — a Query button for related images

The panel should help the user find other images with the same credit, in one click.

Step 1. Add a new section below Asset facts. Set:

• Label: Find related assets
• Description: Quick links to assets that share metadata with this one

Step 2. Add a Grid x1 row inside the new section.

Step 3. From the palette, drag a Query button (an Action component, button type Query) into the row.

Step 4. Set the button’s options:

• Display name: Show all images by this credit
• Query: assetDomain:image AND credit:"{credit}"
• Always on: off
• Confirmation popup: off (the button is a navigation action, not a data change)
• Applies to: Clear all, then tick Image only

Step 5. Save changes.

The {credit} substitution is the trick that makes this button useful: when the user clicks it, the Workflow Assistant replaces {credit} with the credit value from the currently selected image, then runs the resulting query. A single button means “find everything by the same person.”

Note: The query uses Lucene. If you are not yet comfortable with the syntax, read 02d — How conditions work: Lucene and regex in plain language before continuing. The query above reads as “the asset is an image and its credit matches the credit of the currently selected asset.”

Step 8. Add a Notification for missing credit

The most common design mistake is not telling users when something needs their attention. A small Notification fixes that.

Step 1. Above the Asset facts section (drag it to the top of the tab), add a new section. Set:

• Label: (leave blank — Notifications often live in unlabelled sections)

Step 2. Drag a Notification component into a Grid x1 row inside the new section.

Step 3. Set:

• Message type: Warning
• Notification text: This asset has no credit yet. Add one in the Credit field below before publishing.
• Display condition: assetDomain:image AND NOT credit:*
• Applies to: Clear all, tick Image only. Leave No asset unticked

Step 4. Save changes.

The display condition reads as “the asset is an image, and the credit field has no value.” When both are true, the Notification appears in yellow at the top of the panel; when either is false, the Notification is hidden. Read 02d if the NOT credit:* part is unfamiliar — it is the Lucene way of saying “the field is empty.”

Step 9. Save, publish, and verify

The panel is complete. Time to make it live and look at it from the user side.

Step 1. Make sure all your changes are saved. The header should show the saved-state indicator clean.

Step 2. Publish the panel. Use the Save control in the menu.

Step 3. Switch to your second browser window — the one signed in to Assets as a test user.

Step 4. Navigate to the test folder containing your two image assets. Select the image with a credit. The Workflow Assistant panel on the right should show:

• The Image details tab
• The Asset facts section with the Title and Credit fields filled in
• The Find related assets section with the Show all images by this credit button
• No Warning notification (because the credit is filled)

Step 5. Select the image without a credit. The Workflow Assistant panel should now show the same tab and sections, but the Warning notification appears at the top, telling the user to fill the credit field.

Step 6. Click the Show all images by this credit button on the image with a credit. Assets should run the query and return matching images.

Step 7. Select a non-image asset (a video, a document, a PDF). The Image details tab should disappear from the panel — because every component has its visibility checklist set to Image only, and a non-image selection matches none of them.

If everything behaves as described, your first panel is live and working. If something does not match, work through the visibility checklists and conditions carefully — those are the two areas where a small mistake hides a component or fires a Notification at the wrong time.

Tip: This switch-and-verify pattern — make a change in the Configurator, sign in as a test user in another window, refresh, look — is the rhythm of all panel design. Get the muscle memory in before your panels get any larger.

Step 4. The canvas now reflects the restored revision. Save and publish to make it live.

Note: A Rollback is available if you contact your WoodWing representative. This restores the configuration to a previous state. In later versions it will be available to users.

What you have just learned

You have, in fifteen minutes:

• Created a tab and configured its audience
• Created two sections and labelled them clearly
• Placed Field, Action, and Notification components from the palette
• Bound fields to Assets metadata using the Field-name autocomplete
• Used the visibility checklist to limit components to one asset kind
• Written a Lucene query with field substitution to power a Query button
• Written a Lucene display condition to drive a contextual Notification
• Published and verified the panel as a real user
• Rolled back to a previous revision

Every page in the rest of this manual extends one of those moves with more options, more conditions, and more types of component. The shape of the work is the same.

Where to go from here

• 04 — Designing a panel — the methodology and patterns to apply now that you know the mechanics
• 05 — Configuring components — the full reference for every option, every type
• 06 — Visibility, disabling, and validation — all three condition slots in depth
• 08 — Tabs and audience targeting — when one tab is not enough
• 09 — Testing, publishing, and rollback — the lifecycle covered properly

Revisions

• 8 May 2026: First publication of the manual