Meteor Autoform Materialize templates

Materialize-css styled forms for use with aldeed:autoform.

Thank You This suite of packages is maintained by ExpertBox.com as a thank you to the Open Source community.

Drag and Drop Sortable Arrays Demonstrate your organizational skills by drag and drop sorting arrays!

Whats New(ish) File Uploads with Meteor-Files, Auto Complete, Easy Defaults, Responsive Text, Timepicker

Cash for Issues We will pay you cash to close issues on this suite of projects! See contributions section below for info.

Shiny Modals Want forms in modals? See mozfet:meteor-autoform-materialize-modals.

Compatability

Version 4.0.12 of this package was manual smoke tested in Playground 4.0.8 with:

• OSX High Sierra 10.13.6
• Chrome Version 62.0.3497.81 (Official Build) (64-bit)
• Meteor 1.8
• Simple Schema 0.5 (NPM Package)
• Materialize CSS 1.0.0 (NPM Package)
• Hammerjs 2.0.8 (NPM Package)
• Aldeed Autoform 6.3.0 (Atmosphere Package)
• Aldeed Collection2 2.1.2 (Atmosphere Package)
• Mozfet Autoform Materialize Modals 1.1.5 (Atmosphere Package)
• Mozfet Autoform Materialize Files 2.1.0 (Atmosphere Package)
• Mozfet Autoform Medium 2.0.4 (Atmosphere Package)
• Mozfet Material Icons 1.0.1 (Atmosphere Package)
• Ostrio Files 1.10.2 (Atmosphere Package)
• FourSeven SCSS 4.9.0 (Atmosphere Package)
• NoUiSlider 0.5.0 (NPM Package)
• Wnumb 1.1.0 (GIT Repo)
• Material Design Icons Fonts 3.0.1 (Atmosphere)

Installation

Install Materialize CSS (CSS & SASS) using NPM

1. install dependancies

$ meteor npm install hammerjs --save
$ meteor npm install materialize-css --save
$ meteor add fourseven:scss

2. create init script to import JavaScript in file /imports/startup/client/materialize.js

import 'hammerjs'
import 'materialize-css/dist/js/materialize.js'
import 'materialize-css/extras/noUISlider/nouislider.js'

3. create scss include paths in file '/scss-config.json'

1{
2  "includePaths": [
3    "{}/node_modules/materialize-css/sass/"
4  ]
5}

4. import init script in file /imports/startup/client/index.js

1import 'materialize.js'

5. import SASS in file /client/main.scss

@import "../node_modules/materialize-css/sass/materialize.scss"
@import "{mozfet:autoform-materialize}/style.scss"

Install Autoform Materialize

Using the command line in the project folder:

$ meteor add mozfet:autoform-materialize

Optionally add the extras (if needed)

$ meteor add mozfet:autoform-materialize-modals
$ mozfet:autoform-medium
$ mozfet:autoform-materialize-nouislider
$ mozfet:autoform-materialize-files

In client startup code, e.g. project/imports/startup/client/autoform.js

1import AutoFrom from 'meteor/aldeed:autoform';
2AutoForm.setDefaultTemplate('materialize');

In client view js, e.g. project/imports/gui/views/insertBook.js

1Books = new Mongo.Collection("books");
2Books.attachSchema(new SimpleSchema({
3  title: {
4    type: String,
5    label: "Title",
6    max: 200
7  },
8  author: {
9    type: String,
10    label: "Author"
11  }
12}, { tracker: Tracker }));

In client view html, e.g. project/imports/gui/views/insertBook.html

1<template name="insertBookForm">
2  {{> quickForm collection="Books" id="insertBookForm" type="insert"}}
3</template>

See Autoform documentation for more form examples.

This package is part of a suite

• mozfet:meteor-autoform-materialize
• mozfet:meteor-autoform-materialize-modals
• mozfet:meteor-autoform-nouislider
• mozfet:meteor-autoform-medium
• mozfet:meteor-autoform-file
• mozfet:materialize-icons
• mozfet:meteor-autoform-materialize-playground

Demo, Examples, Detailed Usage and Smoke Testing

Have a look at the playground for demo, examples, detailed usage and smoke testing.

Additional types

Auto Complete

MaterializeCSS is busy adding support for Auto Complete in V1, however at the time of writing this is not yet supported in a stable release and does not yet support multiple entries in an autocomplete. For this reason this package makes use of a modified hard fork of materialize-autocomplete, and will do so until the build in MaterializeCSS support for this feature is more mature.

In your schema definition (see playground for extensive list of examples):

1autoCompleteSingular: {
2  type: String,
3  optional: true,
4  label: 'Auto Complete Singular',
5  allowedValues:  ['Alpha', 'Animal', 'Brave', 'Butter', 'Better', 'Charlie'],
6  autoform: {
7    type: 'autocomplete'
8  }
9},
10
11autoCompleteSingularDisplayLimit: {
12 type: String,
13 optional: true,
14 label: 'Auto Complete With Placeholder and Display Limit of 3',
15 allowedValues: ['Alpha', 'Animal', 'Always', 'Anytime'],
16 autoform: {
17   type: 'autocomplete',
18   placeholder: 'Type something',
19   displayLimit: 3
20 }
21},
22
23autoCompleteMultipleMinMaxDefault: {
24  type: Array,
25  label: 'Auto Complete Multiple with count between 1 and 3',
26  minCount: 1,
27  maxCount: 3,
28  autoform: {
29    type: 'autocomplete',
30    multiple: true,
31    options: () => {
32      return [
33        {
34          label: 'Alpha',
35          value: 'ALPHA'
36        },
37        {
38          label: 'Animal',
39          value: 'ANIMAL'
40        },
41        {
42          label: 'Always',
43          value: 'ALWAYS'
44        },
45        {
46          label: 'Anytime',
47          value: 'ANYTIME'
48        },
49        {
50          label: 'Bravo',
51          value: 'BRAVO'
52        },
53        {
54          label: 'Bedtime',
55          value: 'BEDTIME'
56        }
57      ];
58    },
59    displayLimit: 3,
60    default: ['ALPHA', 'ANIMAL']
61  }
62},
63'autoCompleteMultipleMinMax.$': {
64    type: String,
65    allowedValues: ['ALPHA', 'ANIMAL', 'ALWAYS', 'ANYTIME', 'BRAVO', 'BEDTIME']
66}

NoUiSlider

To add NoUiSlider (see the playground):

meteor add mozfet:autoform-materialize-nouislider

You can apply it directly in your template:

1{{> afFieldInput name="dateField" type="pickadate"}}

You can also specify it at the schema level:

TODO

PickADate

Materialize uses pickadate for date inputs.

You can apply it directly in your template:

1{{> afFieldInput name="dateField" type="pickadate"}}

You can also specify it at the schema level:

1MySchema = new SimpleSchema({
2  dateField: {
3    type: Date,
4    label: 'Pick a date with options',
5    autoform: {
6      type: 'pickadate',
7      pickerOptions: {
8        container: '#modalContainer'
9      }
10    }
11  }
12})

PickATime

You can apply it directly in your template:

1{{> afFieldInput name="timeField" type="pickatime"}}

You can also specify it at the schema level:

1MySchema = new SimpleSchema({
2  timeField: {
3    type: String,
4    label: 'Pick a time',
5    autoform: {
6      type: 'pickatime',      
7      pickerOptions: {
8        default: 'now',       // Set default time
9        fromnow: 0,           // set default time to * milliseconds from now (using with default = 'now')
10        twelvehour: false,    // Use AM/PM or 24-hour format
11        donetext: 'OK',       // text for done-button
12        cleartext: 'Clear',   // text for clear-button
13        canceltext: 'Cancel', // Text for cancel-button
14        autoclose: false,     // automatic close timepicker
15        ampmclickable: true,  // make AM PM clickable        
16      }
17    }
18  }
19})

Note that when using PickATime with an initialised value from a doc, that the default time and fromnow is overwritten with the value from the doc.

Choosing a Timezone

By default, the field's value will be a Date object representing the selected date and time in the browser's timezone (i.e., based on the user's computer time settings). In most cases, you probably want the Date object relative to some other timezone that you have previously stored. For example, if the form is setting the start date of an event, you want the date to be relative to the event venue's timezone. You can specify a different IANA timezone ID by adding a timezoneId attribute.

1{
2  date: {
3    type: Date,
4    autoform: {
5      type: "pickadate",
6      timezoneId: "America/New_York"
7    }
8  }
9}

Or:

1{{> afFieldInput name="typeTest" type="pickadate" timezoneId="America/New_York"}}

Automatic Type Conversions

This input type is intended to be used with type: Date schema keys, but it also works with other schema types. Here's a list:

• Date: Value is stored as a Date object representing the selected date and time in the timezone you specified with the timezoneId attribute. By default, the timezone is that of the browser (i.e., the user's computer time settings).
• String: Value is stored as a string representation of the selected date in ISO format, e.g., "2014-11-25T00:00:00".
• Number: Value is stored as the result of calling getTime() on the Date object (representing the selected date and time in the timezone you specified).
• Array: If the schema expects an array of Date or String or Number, the value is converted to a one-item array and stored.

To provide pickadate options, set a pickadateOptions attribute equal to a helper that returns the options object.

FlowText

You can apply it directly in your template:

1{{> afFieldInput name="someTextToDisplay" type="flowtext"}}

You can also specify it at the schema level:

1MySchema = new SimpleSchema({
2  someTextToDisplay: {
3    type: String,
4    autoform: {
5      type: 'flowtext'      
6    }
7  }
8});

Switch

You an also use switches

At the template level:

1{{> afFieldInput name='dateFieldName' type="switch"}}

At the schema level:

1MySchema = new SimpleSchema({
2  booleanFieldName: {
3    type: Boolean
4    autoform: {
5      type:"switch"
6    }
7  }
8});

You may specify the trueLabel or falseLabel options to customize the switch.

At the template level:

1{{> afFieldInput name='dateFieldName' type="switch" trueLabel="Online" falseLabel="Offline"}}

At the schema level:

1MySchema = new SimpleSchema({
2  booleanFieldName: {
3    type: Boolean
4    autoform: {
5      type:"switch"
6      trueLabel:"Online"
7      falseLabel:"Offline"
8    }
9  }
10});

If you need other values than boolean, you may specify the trueValue or falseValue options to customize the switch.

At the template level:

1{{> afFieldInput name='dateFieldName' type="switch" trueValue="online" falseValue="offline"}}

At the schema level:

1MySchema = new SimpleSchema({
2  booleanFieldName: {
3    type: Boolean
4    autoform: {
5      type:"switch"
6      trueValue:"online"
7      falseValue:"offline"
8    }
9  }
10});

File Upload

Upload files, with preview, using Meteor Files.

fileUpload: {
  type: String,
  optional: true,
  autoform: {
    type: 'fileUpload',
    collection: 'Files'
  }
}

Alternatively, see mozfet:autoform-materialize-file

Input with prepended icon

You can add icon to any field like this:

1{{> afQuickField name='subject' icon='person'}}

For blank space in place of icon, just use "none":

1{{> afQuickField name='subject' icon='none'}}

It also works for textarea:

1{{> afQuickField name='message' type='textarea' icon='person'}}

Default Values

You can easily add a default value to a select, text, number, autocomplete (more coming soon) input in the schema.

1selectWithDefault: {
2  type: String,
3  allowedValues: ['VALUE1', 'VALUE2'],
4  autoform: {
5    type: 'select',
6    default: 'VALUE1'
7  }
8},
9
10stringDefault: {
11  type: String,
12  max: 1000,
13  label: 'Simple text field with default value',
14  autoform: {
15    default: 'default text'
16  }
17}

Contributors

If you use this package and find it useful, why not help improve it? We want your feature requests, bug reports, and pull requests.

Cash for Issues We will pay you to close issues on this suite! You pick your own issues, set your own place and time, you do it at your own pace, you make an estimate for your own work, and set your own price (be gentle please, we are a small startup, Ts&Cs apply). As long as it works, not break anything else, and looks good, we are happy. Payments are made to your PayPal account after pull request is approved. Interested? Please drop us a mail at info@expertbox.com.