I am trying to make autoform like this.
What I want is Fields.$.min field to be seen only if fields.$.type ="Number". In the demo ( of aldeed:autoform) it is done for normal field but not for Array field. Tried several combinations to use afArrayField etc but no luck. Can this be done ?
Registers.attachSchema(new SimpleSchema({
config: {
type: Object
},
'config.name': {
type: String,
label: 'Register Name',
autoform: {
'label-type': 'floating',
placeholder: 'Register Name',
max: 200
}},
**fields: {
type: [Object]
}**,
'fields.$.name': {
type: String,
autoform: {
'label-type': 'placeholder',
placeholder: 'Field Name'
}
},
'fields.$.**min**': {
type: String,
autoform: {
'label-type': 'placeholder',
placeholder: 'Min Value'
}
},
'fields.$.type': {
type: String,
label: 'Label',
autoform: {
options: [
{value: 'String', label: 'String'},
{value: 'Number', label: 'Number'},
{value: 'Date', label: 'Date'},
{value: 'Password', label: 'Password'}
]
}
}
}));
Related
I'm trying to have a Category array display on the frontend with items that reference the Category below it.
I've been able to render the category titles on the page, but not the items with references to that category by doing:
export default function Menu({data}) {
const {category} = data;
return (
<section>
{category?.length > 0 &&
category
.map((category) => (
<article key={category._id}>
{category?.title &&
<h1 className="text-3xl">{category.title}</h1>}
))}
</section>
export async function getStaticProps() {
const category = await client
.fetch(
`*[_type == "category"] {
title,
"menuItems": *[_type == "menuItem" && references(^._id)] {
title,
description,
price,
...
}
}
`);
return {
props: {
data: { category }
},
}
}
I've been trying to use .map to find and return the reference data ...
Here are the Sanity schemas I have for Category and menuItem
for Category:
export default {
name: 'category',
title: 'Category',
type: 'document',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
],
};
for menuItem:
export default {
name: 'menuItem',
title: 'Menu Item',
type: 'document',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
{
name: 'category',
title: 'Category',
type: 'reference',
to: [{ type: 'category' }],
},
{
name: 'price',
title: 'Price',
type: 'number',
},
{
name: 'description',
title: 'Description',
type: 'string',
},
],
};
I know I'm doing something wrong, but can't sort it out. Can anyone help?
Thank you so much
I have this schema:
AdsSchema = new SimpleSchema({
title: {
type: String,
label: "Title"
},
_cityId: {
type: String,
label: "City ID"
},
_categoryId: {
type: String,
label: "Category ID"
},
insertedDateTime: {
type: Date,
label: "Inserted Date Time",
autoValue: function() {
if (this.isInsert) {
return new Date();
} else if (this.isUpsert) {
return {$setOnInsert: new Date()};
} else {
this.unset(); // Prevent user from supplying their own value
}
}
},
insertedBy: {
type: String,
label: "Inserted By"
defalutValue: Meteor.user().username
},
price: {
type: Number,
label: "Price"
},
image: {
type: Object,
label: "Image",
optional: true
},
email: {
type: String,
label: "Email"
},
phoneNumber: {
type: String,
label: "Phone Number",
optional: true
},
desc: {
type: String,
label: "Description",
autoform: {
afFieldInput: {
type: "textarea",
rows: 10
}
}
},
quickOrNot: {
type: Boolean,
label: "Quick Or Not",
}
});
I use quickForm for insert to mongoDB, whit following code:
{{> quickForm schema="AdsSchema" collection="Ads" id="insBaseAds" type="insert"}}
and autoForm generate for me a form with all of schema's fields.
but I want only limit fields to show to user on autform, for example these fields:
title, price, image, email, phoneNumber, desc
and I fill some fields my self, for example these fields:
_cityId: "test",
_categoryId: "test",
insertBy: "test"
how can I use quickForm?
You can use afQuickfields
{{>afQuickFields fields="title, price, image, email, phoneNumber, desc"}}
else you can use type 'hidden' in schema
_cityId: {
type: String,
label: "City ID",
autoform:{
type:"hidden"
}
}
I have setup my collections like this using Simple Schema :
SubLinkSchema = new SimpleSchema({
name: {
type: String,
label: 'Link Name',
unique: false
},
link: {
type: String,
regEx: SimpleSchema.RegEx.Url,
label: 'Custom Link',
optional: true,
autoform: {
class: 'sub-custom-link'
}
}
});
LinkSchema = new SimpleSchema({
name: {
type: String,
label: 'Link Name',
unique: false
},
link: {
type: String,
regEx: SimpleSchema.RegEx.Url,
label: 'Custom Link',
optional: true,
autoform: {
class: 'main-custom-link'
}
},
subLinks: {
optional: true,
label: 'Sub Links',
unique: false,
type: [SubLinkSchema]
}
});
In here, the problem is, the sublinks do not get an ID. Its hard to update them without an id. So, how can I generate a unique ID per sublink (embedded document)?
use an autovalue field in the SimpleSchema
see ref here:
https://github.com/aldeed/meteor-collection2#autovalue
and example:
subLinkID: {
type: String,
autoValue: function() {
return Meteor.uuid();
}
}
It should go with the
Meteor.uuid()
I have a collection called Assesments and another collection called ChairAssesments, I have these defined separately now, but for later use I want to insert a value by default into ChairAssesments whenever I insert value in Assesments.
So I want to do something like
Assesments.after.insert(function (userId, doc) {
ChairAssesments.insert({ assesmentId: doc._id });
});
but this is not working
Assesment collection
Assesments = new Mongo.Collection('assesments');
ChairAssesments = new Mongo.Collection('chairassesments');
Assesments.after.insert(function (userId, doc) {
ChairAssesments.insert({ assesmentId: doc._id });
});
Assesments.before.insert(function (userId, doc) {
doc.createdAt = new Date();
doc.assesmentDate = new Date();
});
Assesments.attachSchema(new SimpleSchema({
name: {
type: String,
label: 'First Name',
autoform: {
'label-type': 'placeholder',
placeholder: 'First Name'
}
},
email: {
type: String,
label: 'Email',
autoform: {
'label-type': 'placeholder',
placeholder: 'Email'
}
},
category: {
type: String,
label: 'Category',
optional: true,
autoform: {
options: [
{value: 'General', label: 'General'},
{value: 'Reported', label: 'Reported'},
{value: 'Follow Up', label: 'Follow Up'}
],
type: 'select-radio'
}
},
assesmentDate: {
type: Date,
label: 'Assesment Date',
optional: true
},
location: {
type: String,
label: 'Location',
autoform: {
'label-type': 'placeholder',
placeholder: 'Location'
},
max: 200
},
chairAssesments:{
type: ChairAssesments
}
}
));
if (Meteor.isServer) {
Assesments.allow({
insert: function (doc) {
return true;
},
update: function (doc, fieldNames, modifier) {
return true;
},
remove: function (doc) {
return true;
}
});
}
ChairAssesment collection
ChairAssesment = new Mongo.Collection('chairassesment');
ChairAssesment.before.insert(function (userId, doc) {
doc.createdAt = new Date();
});
ChairAssesment.attachSchema(new SimpleSchema({
assesmentId: {
type: String
},
height: {
type: String,
label: 'Chair Height (Open hip angle)',
optional: true,
autoform: {
options: [
{value: 'Very Less', label: 'Very Less'},
{value: 'Medium', label: 'Medium'},
{value: 'Very High', label: 'Medium'}
],
type: 'select-radio'
}
},
backSupport: {
type: String,
label: 'Back Support',
optional: true,
autoform: {
options: [
{value: 'Very Less', label: 'Very Less'},
{value: 'Medium', label: 'Medium'},
{value: 'Very High', label: 'Medium'}
],
type: 'select-radio'
}
},
seatDepth: {
type: String,
label: 'Seat Depth',
optional: true,
autoform: {
options: [
{value: 'Very Less', label: 'Very Less'},
{value: 'Medium', label: 'Medium'},
{value: 'Very High', label: 'Medium'}
],
type: 'select-radio'
}
},
tiltLock: {
type: String,
label: 'Tilt Lock',
optional: true,
autoform: {
options: [
{value: 'Very Less', label: 'Very Less'},
{value: 'Medium', label: 'Medium'},
{value: 'Very High', label: 'Medium'}
],
type: 'select-radio'
}
},
armRests: {
type: String,
label: 'Arm Rests',
optional: true,
autoform: {
options: [
{value: 'Very Less', label: 'Very Less'},
{value: 'Medium', label: 'Medium'},
{value: 'Very High', label: 'Medium'}
],
type: 'select-radio'
}
},
fidgeting: {
type: String,
label: 'Fidgeting',
optional: true,
autoform: {
options: [
{value: 'Very Less', label: 'Very Less'},
{value: 'Medium', label: 'Medium'},
{value: 'Very High', label: 'Medium'}
],
type: 'select-radio'
}
},
standingUp: {
type: String,
label: 'Standing Up',
optional: true,
autoform: {
options: [
{value: 'Very Less', label: 'Very Less'},
{value: 'Medium', label: 'Medium'},
{value: 'Very High', label: 'Medium'}
],
type: 'select-radio'
}
}
}
));
if (Meteor.isServer) {
ChairAssesment.allow({
insert: function (doc) {
return true;
},
update: function (doc, fieldNames, modifier) {
return true;
},
remove: function (doc) {
return true;
}
});
}
Insert method of a collection takes object (JSON) as a first parameter. Read more about JavaScript objects here: http://www.codermania.com/javascript/lesson/1r/objects
Read more about insert method in Meteor docs: http://docs.meteor.com/#/full/insert
Your code should look like this:
Assesments.after.insert(function (userId, doc) {
ChairAssesments.insert({ assesmentId: doc._id });
});
How to specify tags in the value of the textfield in ext js.
my code:
var myText = new Ext.form.TextField({
readOnly: true,
id: "key",
cls:"overflowText",
value: '<span style="color:red">'+name+'</span>',
});
This doesnt apply color to the value.How can i do it?
Use the fieldCls property, you shouldn't need the span.
Fiddle
// Style
<style>
.overflowText {
color: red;
}
</style>
// Code
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.Panel', {
width: 500,
height: 300,
title: "FormLayout Panel",
layout: 'form',
renderTo: Ext.getBody(),
bodyPadding: 5,
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
fieldCls: 'overflowText',
allowBlank: false
}, {
fieldLabel: 'Last Name',
name: 'last'
}, {
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype: 'email'
}, {
fieldLabel: 'DOB',
name: 'dob',
xtype: 'datefield'
}, {
fieldLabel: 'Age',
name: 'age',
xtype: 'numberfield',
minValue: 0,
maxValue: 100
}, {
xtype: 'timefield',
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
}]
});
}
});
Maybe it happens because style rule is missing semicolon at the end? So it should be <span style="color:red;">