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:
display a list of docs (aldeed:tabular
)
EDIT a single selected doc (aldeed:autoform
)
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 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.
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.
brajt
October 19, 2015, 6:29pm
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
@serkandurusoy : Yeah man, you are right! It does work with type="disabled"
… this is actually a good thing that would work…
1 Like
bysabi
October 31, 2015, 9:45am
8
Hi @brajt do you have some example repo of the switch edit/view aproach with AutoForm?
brajt
October 31, 2015, 10:25am
10
In short:
declare a doubleclick event on div element that sets the value of myReactiveVar to true.
show your div if myReactiveVar is false
show autoform with div contentEditable=true (or just input) + buttons for cancel and submit if myReactiveVar is true.
declare a click event on cancel button that sets myReactiveVar to false.
If you prefer, you can also simply do div contentEditable=myReactiveVar…
bysabi
October 31, 2015, 10:38am
11
Good!!
Now is more clear to me.
Thanks