CODEWITHSUNDEEP
meteormeteor-autoform
ChatGPT
ChatGPT

Reputation: 5617

How to format options (radio) with meteor-autoform?

I'm trying to generate options which look like this using the meteor-autoform package:

<div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" class="px"> <span class="lbl"><strong>amazon.co.jp</strong></span><br> <span class="lbl">Ordered qty 1 on Oct 13, 2014 (4 days ago)</span><br> </label> </div>

but it seems like i don't have much control over html formatting. Is my only option to create my own custom autoform template? I'm having trouble understanding how to do that.

I've looked at the example templates, but I can hardly understand it. In the bootstrap3-horizontal template, I don't see any reference to 'option' or 'radio'. So it's not much help in figuring out how to create a custom template for options.

Any tips or examples much appreciated!

EDIT We are generating the options with this in the template:

 {{> afQuickField name='purchaseItemId' options=purchaseSelectOptions noselect=true template="bootstrap3-horizontal" label-class="col-sm-2" input-col-class="col-sm-10" class="form-control"}}

and a function in the js

purchaseSelectOptions: function() {
return _.chain(this.potentialPurchaseItems)
  .filter(function(potentialPurchaseItem) {
    return potentialPurchaseItem.totalQuantityReceived < potentialPurchaseItem.quantityPurchased;
  })
  .map(function(purchaseItem) {
    var vendor = Vendors.findOne({_id: purchaseItem.vendorId});
    var vendorName = vendor ? vendor.vendorName : 'loading...';
    return {
      label: vendorName + ' - waiting to receive ' + (purchaseItem.quantityPurchased - purchaseItem.totalQuantityReceived) + '. (Qty ' + purchaseItem.quantityPurchased + ' ordered ' + moment(purchaseItem.purchasedAt).format("MMM-DD-YYYY") +')',
      value: purchaseItem._id,
    };
  })
  .value();
},

So it's not merely a matter of styling the elements individually. I'm trying to figure out how to modify the autoform template or something so I have more control over the structure and classes.

Upvotes: 0

Views: 929

Answers (1)

ChatGPT
ChatGPT

Reputation: 5617

got help on another forum. What is protocol here? just link to it or paste it?

Assuming autoform 4.0+

On your afQuickField, add attribute afFieldInput-template="optionExtras".

Then define that override theme template. Template name should be input type template + "_" + your theme template name. In your case, you want to override the "select-radio" type template, which as you can see here, is named afRadioGroup. So the full template name should be "afRadioGroup_optionExtras".

<template name="afRadioGroup_optionExtras">
  // your template
</template>

I would recommend copying the bootstrap theme template and all of its template helpers. Then you can just add your extras. For passing in data, add custom attributes to your afQuickField, and you can then access them in the theme template under this.atts.

Upvotes: 3

Related Questions