In place editing and the best way to do it

Ask us anything
1

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!

1 Like
2

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.

2 Likes
3

@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!

4

All our element are open source, so you can check the code here.
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 for example. Feel free to send me a DM if you want a quick demo.

1 Like