communitypackages:autoform-bootstrap4

v1.0.4Published 3 years ago

This package has not had recent updates. Please investigate it's current state before committing to using it in your project.

AutoForm Theme Bootstrap 4

This theme contains the Bootstrap 3 compatible theme for aldeed:autoform. It requires a Boostrap 4 installation.

Installation

If you haven't installed Bootstrap 4 yet, you need to install it and it's peer dependencies using NPM.

You can (optionally) add fontawesome for builtin icons. This theme supports fontawesome 4 and font-awesome 5

Also note, that Meteor's default builtin jquery is not sufficient, which is why you need to add it here, too.

Altogether you need the following packages:

$ meteor npm install --save bootstrap popper.js jquery
$ meteor npm install --save @fortawesome/fontawesome-free # optional, if using FA 5
$ meteor add communitypackages:autoform-bootstrap4 jquery@3.0.0!
$ meteor add fortawesome:fontawesome # optional, if using FA4

Import the Bootstrap theme and optional packages in your otp level client code:

1import 'bootstrap'
2import 'bootstrap/dist/css/bootstrap.css'            // optional, default theme
3import '@fortawesome/fontawesome-free/js/all.js' // optional, is using FA5
4import popper from 'popper.js'
5global.Popper = popper                           // fix Popper.js issues

You have two options of installing this theme.

A. Adding the theme to the initial bundle (default); comfortable but with bigger initial bundle size.

B. Using dynamic imports and adding the theme on-demand; manual effort required but lowers the footprint of the initial client bundle.

In both cases you have to install the package to your packages list:

$ meteor add communitypackages:autoform-bootstrap4

Installing using static imports (default)

You don't have to do a thing, simply adding the package will automatically make it available to your client. The only thing you need to do is either setting the theme globally or locally.

Installing using dynamic imports

This theme supports dynamic-import so your initial client bundle will not contain any of this package's code.

In order to do so you need to start your Meteor application with a truthy AUTOFORM_DYNAMIC_IMPORTS environment flag:

$ AUTOFORM_DYNAMIC_IMPORTS=1 meteor

This will cause the package to make an export available, that contains a function that dynamically loads the theme.

In order to load the theme you need to add the following code before you use the form (if the form is intended to use this theme):

1import { AutoFormThemeBootstrap4 } from 'meteor/communitypackages:autoform-booostrap4'
2
3AutoFormThemeBootstrap4.load()
4  .then(() => {
5    // theme is imported, you can now make the form available
6    // you could use a reactive var that resolves to true here
7    // or any other mechanism you like to use to reactively activate the form
8  })
9  .catch(err => {
10    // handle load error
11  })

Troubleshooting

If you decide to use one of the import oprtions (static vs dynamic) and you aim to change you might face the situation of an empty form. This is because the package may still "keep" the prior configuration (depending on the environment variable AUTOFORM_DYNAMIC_IMPORTS), since the package has not been rebuilt.

You may have to reset your app via meteor reset or delete the folder .meteor/local in order to rebuild the package with the updated import config.

Using the theme

After installation you have to options to use the theme with your forms:

Setting the theme globally

Add the following code before you create the first form:

1AutoForm.setDefaultTemplate('bootstrap4')

Setting the theme locally

If you want this theme to apply only on certain forms you need to name it in the form declaration:

1{{#autoForm template="bootstrap4" ...}}
2  ...
3{{/autoForm}}

History