AutoForm Theme Bootstrap 4

This theme contains the Bootstrap 4 compatible theme for aldeed:autoform versions 6.0.0 or greater). 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, as well as fontawesome 5 (solid).

Also note, that Meteor's default builtin jquery is not sufficient, which is why you need to install via NPM, too.

Altogether you need the following packages:

# install NPM dependencies
$ meteor npm install --save bootstrap popper.js jquery
$ meteor npm install --save @fortawesome/fontawesome-free # optional, if using FA 5

# install meteor packages
$ meteor add communitypackages:autoform-bootstrap4 jquery@3.0.0!
$ meteor add fortawesome:fontawesome # optional, if using FA4

Importing Bootstrap 4

Import the Bootstrap theme and optional packages in your otp level client code (for example in imports/startup/client/bootstrap.js):

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'
5
6global.Popper = popper                           // fix Popper.js issues

Importing the AutoForm theme

From here you have two options for importing this theme.

A. Static import: Adds the theme to the initial bundle (default); more comfortable but with bigger initial bundle size.

B. Dynamic imports: Adds the theme on-demand; manual effort required but lowers the footprint of the initial client bundle.

Option A - Import using static imports (default)

For statically (immediately) importing the theme you need to import the static loader module in your client's startup code:

1import { AutoFormThemeBootstrap4 } from 'meteor/communitypackages:autoform-bootstrap4/static'
2
3AutoFormThemeBootstrap4.load()

That's it. The theme is imported and ready to use.

Option B - Import using dynamic imports

This theme also supports dynamic-import so your initial client bundle will contain only a minimum portion of this package's code and saves about 39 KB of size (estimated via bundle-visualizer).

In order to do so you need to import the dynamic version of the loader function:

1import { AutoFormThemeBootstrap4 } from 'meteor/communitypackages:autoform-bootstrap4/dynamic'
2
3AutoFormThemeBootstrap4.load()
4  .then(() => {
5    // The 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    // You can now set this theme as default, see the next section.
10    AutoForm.setDefaultTemplate('bootstrap4')
11  })
12  .catch(err => {
13    // handle load error
14  })

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

• 1.0.6
  • fix checkbox/radio buttons where existing values were not marked as checked
• 1.0.5
  • provide real split between static and dynamic version without environment flags required
• 1.0.4
  • skipped, do not use
• 1.0.3
  • Added optional dynamic import via AUTOFORM_DYNAMIC_IMPORTS env flag
• 1.0.2
  • input type select-radio uses bs4 custom-radio skin
  • input type select-radio-inline uses bs4 custom-radio-inline skin
  • input type select-checkbox uses bs4 custom-checkbox skin
• 1.0.1
  • import via dynamic imports

License

This theme is LICENSED under MIT. See the LICENSE file for more.