I'm using Autoform in my Meteor app with the following schema:
Projects = new Mongo.Collection('Projects');
Projects.attachSchema(new SimpleSchema({
title: {
type: String,
label: "Project Title"
},
tiles: {
type: [Object],
label: "Tiles",
optional: true
},
"tiles.$": {
type: Array,
optional: true
},
"tiles.$.description": {
type: String,
label: "Tile Description",
optional: true
}
}));
In my template I have the following custom autoForm:
{{#autoForm collection="Projects" doc=this id="updateProjectInfo" type="update"}}
{{> afQuickField name="title"}}
{{> afArrayField name="tiles" template="AdminEditTile"}}
<button type="submit" class="btn btn-primary">SAVE</button>
{{/autoForm}}
And then the template for the afArrayField:
<template name="afArrayField_AdminEditTile">
{{> afFormGroup name="this.current.description"}}
</template>
However I'm receiving an error in the browser Exception in template helper: Error: Invalid field name: this.current.description
I've seen some people use the form this.atts.description before but this does not work either. Am I missing something here?
You have to remove the double quotes.
name=this.current.description
Related
How do I get a <select> drop-down menu in the product varientForm?
Something like what we see here:
To accomplish adding a <select> to variantForm as seen above we need to edit or extend three files, variantForm.html, variantForm.js and the products.js schema:
reaction/imports/plugins/included/product-variant/client/templates/products/productDetail/variants/variantForm/variantForm.html
reaction/imports/plugins/included/product-variant/client/templates/products/productDetail/variants/variantForm/variantForm.js
reaction/lib/collections/schemas/products.js
In the AutoForm live example of <select> we see a schema that looks like this:
{
typeTest: {
type: String,
optional: true,
autoform: {
type: "select",
options: function () {
return [
{label: "2013", value: 2013},
{label: "2014", value: 2014},
{label: "2015", value: 2015}
];
}
}
}
}
and a Blaze template HTML that looks like this:
{{#autoForm id="types2" schema=typesSchema2}}
{{> afFormGroup name="typeTest" type="select" options=optionsHelper}}
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
{{/autoForm}}
Step 1
Edit/extend products.js schema file adding your select except we only need to add these parts:
typeTest: {
type: String,
optional: true,
autoform: {
type: "select"
}
},
Reaction Commerce ignores the optionHelper function from AutoForm as we see in the above example. I keep the autoform: { type: "select" } just to express intension. For a real-world example of a product.js schema modified this way see here.
Step 2
Add your helper function to variantForm.js that returns your selection's options object. Inside Template.variantForm.helpers({}) add:
variantTypeOptions: function (){
return [
{label: "Default", value: 2013},
{label: "Height & Weight", value: "Height & Weight"}
];
},
Nice and simple (and similar to the AutoForm example), these become the selection options we see in the screenshot above. Real-world example here.
Step 3
Final step. Let's lastly add the Blaze template HTML to variantForm.html:
<div class="form-group{{#if afFieldIsInvalid name='variantType'}} has-error{{/if}}">
<label class="control-label">{{afFieldLabelText name='variantType'}}</label>
{{>afFieldInput name='variantType' type="select" options=variantTypeOptions}}
{{#if afFieldIsInvalid name='variantType'}}
<span class="help-block">{{afFieldMessage name='variantType'}}</span>
{{/if}}
</div>
With our focus on:
{{>afFieldInput name='variantType' type="select" options=variantTypeOptions}}
Real-world example here.
Closing Remarks
You may need to do a rc reset for the changes to the schema to take effect, but WARNING, this will wipe your local development database. See the note in the RC Docs about having to do frequent resets in the "Creating a Plugin" article.
I want to use {{> afQuickfield name="profile" }} which will pull the name and city input fields and also have it display an input box for the username.
When I add {{> afQuickfield name="username"}} it will just sit lonely below outside the profile QuickField. I want it to be added to the panel along with the profile settings.
How can I achieve a clean Form which has both the Settings in the profile Schema and the username wrapped up in one Form.
Schemas.UserProfile = new SimpleSchema({
name: {
type: String,
optional: true
},
city: {
type: String,
optional: true
}
});
Schemas.User = new SimpleSchema({
username: {
type: String,
regEx: /^[a-z0-9A-Z_]{3,15}$/,
optional: true
},
(...)
profile: {
type: Schemas.UserProfile
}});
Meteor.users.attachSchema(Schemas.User);
I would use three separate afQuickfield for name, city, and username. They can all go in one autoform for User:
{{#autoForm collection="User" id="XXX" type="XXX"}}
{{> afQuickfield name="username"}}
{{> afQuickfield name="profile.name"}}
{{> afQuickfield name="profile.city"}}
{{/autoform}}
I have this Schema (collection: ReleaseForms) defined:
Diseases:{
type: [Object],
optional:true
},
"Diseases.$.name": {
type: String,
optional:true
},
"Diseases.$.description": {
type: String,
optional:true
},
"Diseases.$.language": {
type: String,
optional:true
},
and in example with following content added:
ReleaseForms.update({
"_id": idNewReleaseForm},
{
$push:{
Diseases:{
name:"Blutverdünnungstherapie",
description:"xxxxxxxxxxxx",
language: "de"
}
},
});
and if i view this via Autoform and say update, it doesn't show me the existing objects like (Blutverdünnungstherapie):
But "Name" shows the existing entry of Name!
{{#autoForm collection="ReleaseForms" id="afUpdateReleaseForm" type="update" doc=selectedReleaseFormDoc}}
<fieldset>
{{> afQuickField name="Name"}}
{{> afArrayField name="Diseases"}}
</fieldset>
<button type="submit" class="btn btn-primary">Update</button>
{{/autoForm}}
What can I do that I see the existing entries of Diseases and allows me to edit them?
i get the below error when trying to use PickAdate with gildaspk:autoform-materialize version :0.0.7
here's my schema field :
when: {
type: Date,
autoform: {
type: 'pickadate'
}
here's my form declaration :
{{#autoForm id="addEvents" collection="Events" type="insert"}}
{{> afFieldInput name='when' type="pickadate"}}
<div>
<button type="submit">Submit</button>
</div>
{{/autoForm}}
I'd like to build an array of uploaded files in each document in my collection named Modules. I'm using the following packages:
aldeed:autoform
aldeed:collection2
cfs:standard-packages
cfs:gridfs
cfs:autoform
Collection and Schema (relevant parts):
Modules = new Mongo.Collection('modules');
Modules.attachSchema (new SimpleSchema({
slides: {
type: Array,
optional: true
},
'slides.$': {
type: Object
},
'slides.$.fileId': {
type: String,
label: "Image File"
},
'slides.$.time': {
type: Number,
label: "Time in Seconds"
}
}));
FileStore = new FS.Collection("fileStore", {
stores: [new FS.Store.GridFS("fileStore")]
});
FileStore.allow({
download: function() {
return true;
},
fetch: null
});
In the HTML Template:
{{#autoForm collection="Modules" scope="slides" id="addSlideForm" type="update-pushArray" doc=this}}
<fieldset>
{{> afQuickField name="time" type="number"}}
{{> afQuickField name="fileId" type="cfs-file" collection="fileStore"}}
</fieldset>
<button type="submit" class="btn btn-primary" >Add Slide</button>
{{/autoForm}}
When I hit the submit button, an element is pushed into the array as expected. The time value is correct, but under fileId there is only dummyId instead of the expected _id from fileStore.
In other parts of the application that do not involve nested arrays, uploading files works as expected. In other parts of the application that do not involve uploading files, the update-pushArray form works as expected. The complication is with combining the two.
Am I doing this incorrectly? Or is cfs:autoform just not compatible with the update-pushArray form type?
To use CFS your #autoform type must be either "insert" or "method", check cfs documentation for more info.
Hope it helps!