Autoform Edit/View Mode pattern wanted


Hi guys,

what is the best way/pattern to implement a VIEW(=READ ONLY)-use-case in combination with autoform?

I have 3 use-cases:

  1. display a list of docs (aldeed:tabular)
  2. EDIT a single selected doc (aldeed:autoform)
  3. VIEW single selected doc (???)

What pattern would you recon me to use for UseCase 3) = VIEW MODE?

Is there a way to switch autoform to READ-ONLY, so that I DO NOT have to manually implement a read-only/view .html?

Any suggestions?


Would suffice?

Or you can also use the disabled type and use specific styles for disabled form elements such that they look like text elements.


I created an app a while back that uses autoform and accounts-password. It displays a list of beers and allows you to login. If you are logged in you can add new beers or edit existing beers using the autoform way.

The repo is here:

The whole app is pretty small so the codebase should be pretty easy to understand. let me know if you have any questions.


Thanks for your quick response. Looks like “readonly” is only available for the {{>quickform type=readonly}} BUT I am using an {{#autoform}}-tag. Maybe css styling can do it…


Nope, it should also be available to autoform and if not, that’s probably a bug.


Go for contentEditable divs instead of input fields. This way you could easily switch between edit and view mode. Autoform supports this solution.


@serkandurusoy: Yeah man, you are right! It does work with type="disabled"… this is actually a good thing that would work… :smiley:


Hi @brajt do you have some example repo of the switch edit/view aproach with AutoForm?


In short:

  1. declare a doubleclick event on div element that sets the value of myReactiveVar to true.
  2. show your div if myReactiveVar is false
  3. show autoform with div contentEditable=true (or just input) + buttons for cancel and submit if myReactiveVar is true.
  4. declare a click event on cancel button that sets myReactiveVar to false.

If you prefer, you can also simply do div contentEditable=myReactiveVar…


Now is more clear to me.