DEV Community

Daniel Ziltener
Daniel Ziltener

Posted on

3

Adding custom toolbar buttons to Fulcro 3 Workspaces cards

Recently I came across the problem that I wanted to use Workspaces' toolbar functionality - but with Fulcro 3 cards. There is no official documentation of doing this, so I ended up taking the standard Fulcro 3 card as a base and creating this custom card.
I used the following imports:

(ns util
  (:require [com.fulcrologic.fulcro.algorithms.merge :as m]
            [nubank.workspaces.core :as ws]
            [nubank.workspaces.model :as wsm]
            [nubank.workspaces.ui :as ui]
            [nubank.workspaces.ui.core :as uc]
            [com.fulcrologic.fulcro.dom :as dom]
            [nubank.workspaces.card-types.fulcro3 :as ct.fulcro]))
Enter fullscreen mode Exit fullscreen mode

And created this card:

(defn custom-toolbar-card [fulcro-class & {::keys [toolbar-items card-width card-height] :as props}]
  {::wsm/card-width card-width
   ::wsm/card-height card-height
   ::wsm/align {:flex 1}
   ::wsm/init
   (fn [card]
     (let [fulcro-card (ct.fulcro/fulcro-card-init card {::ct.fulcro/wrap-root? true
                                                         ::ct.fulcro/root       fulcro-class})
           card-id     (::wsm/card-id card)
           app         (::ct.fulcro/app fulcro-card)]
       (assoc fulcro-card
              ::wsm/render-toolbar
              (fn []
                (dom/div
                 (mapv #(uc/button {:onClick ((:fn %) app)} (:text %)) toolbar-items)
                 (uc/button {:onClick #(ct.fulcro/inspector-set-app card-id)}
                            "Inspector")
                 (uc/button {:onClick #(ui/restart-card card-id)}
                            "Restart"))))))})
Enter fullscreen mode Exit fullscreen mode

Note that I added the standard card-with and card-height parameters as well - you can leave those out - and added the default Fulcro 3 buttons.

Buttons can now be added in the format {:fn (fn [app-of-the-card] ...) :text "Button Text")}.

You can use it like this:

(ws/defcard login-card
            (util/custom-toolbar-card
             account-forms/LoginForm
             ::util/card-width 6
             ::util/card-height 16
             ::util/toolbar-items
             [{:fn (fn [app]
                     #(m/merge-component! app account-forms/LoginForm {:ui/error "The credentials you entered are incorrect."}))
               :text "Trigger error"}]))
Enter fullscreen mode Exit fullscreen mode

In this example, I made a card for a login form (account-forms/LoginForm) which is a Fulcro 3 component. I added a toolbar item with the button text "Trigger error" that, when clicked, calls the fn, which is given the fulcro app of the card, updating the LoginForm to set a login error text.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay