I am trying to create a meteor wizard autoform from this package AutoForm Wizard i succeeded to make it work once but after a while i got those exceptions :
Exception in template helper: TypeError: Cannot read property ‘getDefinition’ of undefined
at Object.getFieldDefinition (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:293:18)
at Object.autoFormGetComponentContext [as getComponentContext] (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:558:22)
at Object.afQuickFieldIsGroup (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:7254:32)
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3051:16
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:1715:16
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3103:66
at Function.Template._withTemplateInstanceFunc (http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3744:12)
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3102:27
at Object.Spacebars.call (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:172:18)
at http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:7208:22Exception in template helper: TypeError: Cannot read property ‘label’ of undefined
at Object.autoFormGetLabelForField [as getLabelForField] (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:2945:36)
at Object.autoFormFieldLabelText (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:1436:21)
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3051:16
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:1715:16
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3103:66
at Function.Template._withTemplateInstanceFunc (http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3744:12)
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3102:27
at Spacebars.call (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:172:18)
at Spacebars.mustacheImpl (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:106:25)
at Object.Spacebars.mustache (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:110:39)Exception in template helper: TypeError: Cannot read property ‘namedContext’ of undefined
at Object.autoFormFieldIsInvalid (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:1322:23)
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3051:16
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:1715:16
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3103:66
at Function.Template._withTemplateInstanceFunc (http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3744:12)
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3102:27
at Spacebars.call (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:172:18)
at Spacebars.mustacheImpl (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:106:25)
at Object.Spacebars.dataMustache (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:138:39)
at http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:8223:26Exception in template helper: TypeError: Cannot read property ‘class’ of undefined
at Object.addClass (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:624:22)
at Object.bsFieldLabelAtts (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:8291:31)
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3051:16
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:1715:16
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3103:66
at Function.Template._withTemplateInstanceFunc (http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3744:12)
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3102:27
at Spacebars.call (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:172:18)
at Spacebars.mustacheImpl (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:106:25)
at Object.Spacebars.attrMustache (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:122:39)Exception in template helper: TypeError: Cannot read property ‘namedContext’ of undefined
at Object.autoFormFieldMessage (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:1309:23)
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3051:16
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:1715:16
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3103:66
at Function.Template._withTemplateInstanceFunc (http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3744:12)
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3102:27
at Spacebars.call (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:172:18)
at Spacebars.mustacheImpl (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:106:25)
at Object.Spacebars.mustache (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:110:39)
at Blaze.View._render (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:8260:40)
this is what i am trying to do : I have 3 form steps to fill; contracts , company informations and manager information
well this is my code:
/contracts.js
import {Template} from "meteor/templating";
import SimpleSchema from 'simpl-schema';
import {Meteor} from "meteor/meteor";
SimpleSchema.extendOptions(['autoform']);
Contracts = new Mongo.Collection('contracts');
Companys = new Mongo.Collection('companys');
Schemas = {};
Schemas.company = new SimpleSchema({
name:{
type: String,
label: 'Name'
},
address: {
type: String,
label: 'Address'
},
phone: {
type: String,
label: 'Phone'
},
email: {
type: String,
label: 'Email'
}
});
PackagesTypes = [
{
label: "freemium",
value: "freemium"
},
{
label: "bronze",
value: "bronze"
},
{
label: "silver",
value: "silver"
},
{
label: "gold",
value: "gold"
},
{
label: "platium",
value: "platium"
}
];
Schemas.contract = new SimpleSchema({
name: {
type: String,
label: 'Name',
},
package: {
type: String,
label: 'Package type',
autoform: {
options: PackagesTypes
}
}
});
Schemas.manager = new SimpleSchema({
email: {
type: String,
label: 'Email'
},
password: {
type: String,
label: 'Password'
},
firstName:{
type: String,
label: 'First Name'
},
lastName: {
type: String,
label: 'Last Name'
}
});
Contracts.attachSchema(Schemas.contract);
Companys.attachSchema(Schemas.company);
Template.contractsWizard.onCreated(function contractsWizardOnCreated() {
});
Template.viewOrder.onCreated(function viewOrderOnCreated() {
});
Template.contractsWizard.helpers({
steps: function() {
return [
{
id: 'contracts',
title: 'Contracts',
template: 'contractTemplate',
formId: 'contractTemplate',
schema: Schemas.contract,
onSubmit: function(data, wizard) {
Meteor.call('insertContract', data, function (er,id) {
console.log('id from client');
console.log(id);
var contractId = id;
Session.set('currentRecordId',contractId);
if (er) {
toastr.error("insert problem");
console.log(data);
console.log(er);
} else {
// console.log(data);
toastr.success("Contract added successfully", "success");
wizard.next([data]);
}
})
}
},
{
id: 'company',
title: 'Company information',
template: 'companyTemplate',
formId: 'companyTemplate',
schema: Schemas.company,
onSubmit: function(data, wizard) {
const contractId =Session.get('currentRecordId');
data.contractId = contractId;
Meteor.call('insertCompany', data, function (er,id) {
if (er) {
toastr.error("insert problem");
console.log(er);
} else {
toastr.success("company added successfully", "success");
wizard.next([data]);
}
});
}
},
{
id: 'managers',
title: 'Manager',
template: 'managerTemplate',
formId: 'managerTemplate',
schema: Schemas.manager,
onSubmit: function(data, wizard) {
const contractId =Session.get('currentRecordId');
data.contractId = contractId;
var accountInfo = {
email: data.email,
password: data.password,
profile : {
firstName: data.firstName,
lastName: data.lastName,
contractId: data.contractId
}
};
console.log(accountInfo);
//console.log(wizard.mergedData(),data);
Meteor.call('addUser', accountInfo,'manager', function (er) {
if (er) {
toastr.error( "There was an error making your account","4000");
console.log(er);
} else {
toastr.success( "user added successfully","success");
FlowRouter.go('/admin/dashboard');
}
});
}
}
];
}
});
Template.viewOrder.events({
'click #place'(event) {
event.preventDefault();
FlowRouter.go('/conversation');
}
});
Wizard.useRouter('kadira:flow-router');
and this is /contracts.html
<template name="contractsWizard">
{{> wizard id="contractsWizard" route="basic" steps=steps stepsTemplate="steps_bootstrap3" buttonClasses="btn"}}
</template>
<template name="contractTemplate">
{{#autoForm id="contractTemplate" schema=step.schema}}
{{> afQuickField name="name" }}
{{> afQuickField name="package" }}
{{> wizardButtons}}
{{/autoForm}}
</template>
<template name="companyTemplate">
{{#autoForm id="companyTemplate" schema=step.schema}}
{{> afQuickField name="name"}}
{{> afQuickField name="address"}}
{{> afQuickField name="phone"}}
{{> afQuickField name="email"}}
{{> wizardButtons}}
{{/autoForm}}
</template>
<template name="managerTemplate">
{{#autoForm id="managerTemplate" schema=step.schema}}
{{> afQuickField name="email"}}
{{> afQuickField name="password"}}
{{> afQuickField name="firstName"}}
{{> afQuickField name="lastName"}}
{{> wizardButtons}}
{{/autoForm}}
</template>
<template name="viewOrder">
<p>Thanks for your order {{name}}.</p>
<a id="place" class="btn">Place another order</a>
</template>
and this is /wizard-boostrap3-ui.html
<template name="steps_bootstrap3">
<ul class="nav nav-wizard">
{{#each wizard.steps}}
<li class="{{stepClass id}}">
{{#if wizard.route}}
<a href="{{pathForStep id}}">{{title}}</a>
{{else}}
<span>{{title}}</span>
{{/if}}
</li>
{{/each}}
</ul>
</template>
and /wizard-boostrap3-ui.js
Template.steps_bootstrap3.helpers({
stepClass: function(id) {
var activeStep = this.wizard.activeStep();
var step = this.wizard.getStep(id);
if (activeStep && activeStep.id === id) {
return 'active';
}
if (step.data()) {
return 'completed';
}
return 'disabled';
}
});
and /layout.html
<template name="layout">
<header class="app-header navbar">
<div id="navbarbran" class="navbar-brand" ></div>
<ul class="nav navbar-nav d-md-down-none">
<li class="nav-item px-3">
<div class="dropdownb">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Contracts & Features</button>
<div class="dropdownb-content">
<a href="#">Contracts</a>
<a href="#">Features</a>
</div>
</div>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
</ul>
</header>
<div class="main container">
<h1>Add Contracts</h1>
<nav class="navbar navbar-inverse purple">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><a href="{{pathFor route='basic'}}">Contracts</a></li>
</ul>
</div>
</nav>
{{> Template.dynamic template=area}}
</div>
</template>
and finally /routes.js
FlowRouter.route('/basic/:step?', {
name: 'basic',
action: function(params, queryParams) {
if (!params.step) {
FlowRouter.go('basic', {step: 'company-information'})
} else {
BlazeLayout.render('layout', {area: 'contractsWizard'})
}
},
});
FlowRouter.route('/orders/:_id', {
action: function(params) {
BlazeLayout.render('layout', {area: 'viewOrder'})
}
});