Custom Components

Components are chunks of reusable code. They allow you to define code in a single place and reuse it throughout your app. Components can be references through HTML or with BF JSON schema

This page is under review and not finalized (beta)

Building and Customizing

Both the BF JSON and the HTML API's are the same. Keys within the BF JSON schema can be references from within the component as `schema`

Component API

Key
Type
Description

fields

array

Optional either html or fields keys must be present. Contains BF schema elements normally found in the fields key of the page editor. The schema will be used as a component. If supplied will act as the source of the field schema and replace the components default fields if there are any.

schema

object

All schema keys can be accessed from within the component as schema.myTitle This allows you to pass data dynamically into the component

html

string

Contains HTML to be rendered as a component.

<bfcomp>

HTML tag name needed to identify a BF component

name

string

The component name

modelSource

object

used to supply the model will be for this component, in not supplied, the current model for the element is used.

modelDev

object

Optional. Used to add model keys that can be used for development and tests of components rendered where there is no model available. ( Used by the BF editor )

source

{ component }

If supplied, this will act as the entire source for the component. This attribute was added to allow the BF component editor to preview live components. You probably will never use this key. component is a complete component object (not documented in this doc, see support if needed)

attributes

various

All additional attributes supplied will override the component's schema keys where applicable. You can add any additional attribute or 'props' you need. Eg: buttonLabel

Usage as an JSON Schema element

{
    "name": "MyComponentName",
    "styleClasses": "",
    "type": "bfcomponent"
}

Usage as an HTML Vue component

<bfcomp name="MyComponent" modelSource="model"   ></bfcomp>

Context

Components mostly act the same as any other BF element for context. They see model and app the same regardless of HTML or BF JSON Elelement schema.

Best Practices

Sizing and Styling

Generally, it should be the implementation of the component that is responsible for the component's size. There are some exceptions. This means that the width of your component is generally full width and the parent or 'implementor' of the component will control the width.

Examples:

Component Type
Size controller
Comments

Page Header Component

implementation

this allows the header

Button Component

Defined in component

Buttons generally don't take on the shapre of the parent elements. When you need to override a buttons width, you can pass in a class.

Last updated