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.