Best Practices for Passing HTML and Data to Reusable Components

Support
1

itsjakefromstatefarm:
Hey @betterforms_discourse What’s best practice for passing html to Components? Trying to create widely used components in an app (Card, for example) that has a title, subtitle, and then could have a variety of content inside of it. Here’s how the component is setup:

{
    "fields": [],
    "html": "<div class=\"flex flex-col bg-surface-2 rounded-lg p-4 w-full border\">\n    <div class=\"flex flex-col gap-1\">\n        <h3 class=\"text-label font-bold\">{{schema.title}}</h3>\n        <h4 class=\"text-base text-label-secondary/70 font-medium\">{{schema.subtitle}}</h4>\n    </div>\n    \n    <div v-if=\"schema.fields.length > 0\" class=\"flex flex-col gap-1\">\n        {{schema.fields}}\n    </div>\n</div>",
    "subtitle": "",
    "title": ""
}

<div class="flex flex-col bg-surface-2 rounded-lg p-4 w-full border">
    <div class="flex flex-col gap-1">
        <h3 class="text-label font-bold">{{schema.title}}</h3>
        <h4 class="text-base text-label-secondary/70 font-medium">{{schema.subtitle}}</h4>
    </div>
    
    <div v-if="schema.fields.length > 0" class="flex flex-col gap-1">
        {{schema.fields}}
    </div>
</div>

Calling it here:

<div class="flex justify-between gap-4">
    <bfcomp v-for="(card, index) in model.cards" name="Card" :title="`${card.title} ${index + 1}`" :subtitle="card.subtitle"><p>Hello BetterForms.</p></bfcomp>
</div>

Essentially, we’re trying to recreate {children} in something like React.

Delfs:
Ok, so there are a number of ways to do this, we use several ourselves,
High level - You can pass in shcema or html or data from anything to anything.

Reusable ‘stuff’ can be grouped into a few areas
bf components - Can be made to accept schema, data, html as data or other components

pages - a bf page can act like a giant component, we do this with mand modals in BF and pass in schema most of the time or data.

3rd party libs - Even libraries like Shoelace / Web awesome (it’s replacement) can accept injected data or have slots that can take bf-components

(continued)

Delfs:
For your case above, the ‘card’, if you want to use that as a custom modal and not over other bf card modals (pages) then it would be best as a bf page, if you want it anywhere and over anything then it would be added into a site slot so its always present, as a component or just as html.

bf component scope - components are flexible so you have to specify the model if you are passing content in via the data models modelScope

bf html elements - all bf html element can also render dynamic html via the model key if uses as JSON schema

As I review your code more I see card refers to a ui card vs a modal and your example looks like it should work, waht issue are you seeing?

And for that use case I would also use the same way to pass data via schema

Delfs:
see this example:

image

image

Carlos Zabaleta:
@Delfs could you share the example :pray: thanks. It sounds very interesting. Is there documentation about passing schema, data, or even HTML as data into components?

Jeremy:
@Delfs that’s a very nice way. Good to know.

Delfs:
That what you see there is pretty much the whole example

The components page nees some love for sure in terms of UX, some updats next week there but could use a makeover I think