AutoForm Theme Bootstrap 3

This theme contains the Bootstrap 3 compatible theme. It requires a Boostrap 3 installation.

Installation

First, make sure you have Bootstrap 3 installed in your app. You cann easily add Boostrap 3 via

$ meteor add twbs:bootstrap 

but beware, it's a deprecated package, targeting an outdated Bootstrap version and can lead to problematic XSS vulnerabilities and it requires an outdated jQuery version, that is full of vulnerabilities!

Better: use the NPM version:

$ meteor npm install --save bootstrap@3.4.1 jquery

You will have to import Bootstrap at some point in order to make it available to your css compiler:

1import 'bootstrap'
2import 'bootstrap/dist/css/bootstrap.css'       // optional, default theme
3import 'bootstrap/dist/css/bootstrap-theme.css' // optional, default theme

Troubleshooting jQuery

If you have trouble with jQuery, you can try to explicit reference the latest Meteor jQuery package and then manually install jQuery from NPM:

$ meteor add jquery@3.0.0!  
$ meteor npm install --save jquery  

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 mcp:autoform-bootstrap3

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 { AutoFormThemeBootstrap3 } from 'meteor/mcp:autoform-booostrap3'
2
3AutoFormThemeBootstrap3.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  })

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('bootstrap3')

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="bootstrap3" ...}}
2  ...
3{{/autoForm}}