# In place editing and the best way to do it

**URL:** <https://community.weweb.io/t/in-place-editing-and-the-best-way-to-do-it/451>\
**Category:** Ask us anything\
**Created:** [April 22, 2022, 2:08am UTC](https://community.weweb.io/t/in-place-editing-and-the-best-way-to-do-it/451 "2022-04-22T02:08:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kevinwasie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kevinwasie/32/402_2.png) [@kevinwasie](https://community.weweb.io/u/kevinwasie)\
**Post date:** [April 22, 2022, 2:08am UTC](https://community.weweb.io/t/in-place-editing-and-the-best-way-to-do-it/451/1 "2022-04-22T02:08:34Z")

</div>

I am creating an in place edit element for form fields. See video below.

I am running into two problems:

1. im binding the visibility of the form/text to a variable. I have one page where there are over 100 fields, and I do not want to create 100+ varaibles to manage the display. Is there a better way to do that?
2. Same thing, but for a submit status message that will be a child of the container. I have to create 100+ of these, and I’d rather not do that.

I’m trying to find a way that I could set this up dynamically where the workflow locates the sibling form container, and shows/hides it so that I don’t need to set that up for 100’s of fields.

Any better way to do this?

Thank you!

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [April 25, 2022, 9:08am UTC](https://community.weweb.io/t/in-place-editing-and-the-best-way-to-do-it/451/2 "2022-04-25T09:08:25Z")

</div>

Hey @kevinwasie ,

two possibles approaches I can see

1. Create a variable which hold an id of the current edited field. Then each display is bind to this variable equal the id of the field.  
Ex: A variable `currentEditingField` which can take value `notifyByMail`, `notifyByText`, etc
2. Create an object with id as key  
Ex: A variable isFieldEditing, with value `{notifyByMail: true}`. You can initialize it with an empty object, and just toggle the key value when clicking.

We are working currently on the grid element, and have the same UX question. We may have soon inputs element which can toggle between a readonly state and a edit state. I will let you know when this will be in production.

Last, if all your field are looking like the same, having a custom element is also possible. Let me know if you want more information on this.

---

<div class="post-metadata">

**Author:** ![kevinwasie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kevinwasie/32/402_2.png) [@kevinwasie](https://community.weweb.io/u/kevinwasie)\
**Post date:** [April 25, 2022, 1:31pm UTC](https://community.weweb.io/t/in-place-editing-and-the-best-way-to-do-it/451/3 "2022-04-25T13:31:17Z")

</div>

@aurelie  
Awesome. Yes, I thought an object could be easier and then just edit the fields for turning on/off the edit ui. I think that is what I will probably do, but still kind of a pain.

I’d like to make a custom element, but I don’t have a clue how to do that. I’ve read the WeWeb documentation on this, but it doesnt make any sense to me.

Is there somewhere that I can checkout to learn how to do that simply? even if there was something quick to show me how to get started, I could probably figure it out.

Thanks!

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [April 25, 2022, 2:54pm UTC](https://community.weweb.io/t/in-place-editing-and-the-best-way-to-do-it/451/4 "2022-04-25T14:54:56Z")

</div>

All our element are open source, so you can check the code [here](https://github.com/orgs/weweb-assets/repositories).  
Its all Vue component with some convention specific to WeWeb.

If you are not already familiar with Vue development or at least front end development this can be a bit challenging.

An easy one to start is [ww-icon](https://github.com/weweb-assets/ww-icon) for example. Feel free to send me a DM if you want a quick demo.
