Autoform Edit/View Mode pattern wanted

help
1

Hi guys,

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

Scenario:
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?

2

Would https://github.com/aldeed/meteor-autoform/#readonly suffice?

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

3

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.

4

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…

5

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

6

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

1 Like
7

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

1 Like
8

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

10

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…

11

Good!!
Now is more clear to me.
Thanks