Best way to offer inline editing for a User?

[marc2]

Hi,

I currently have User Profiles where I want to allow the user to edit details on the page, and then when a Save Profile button is clicked the changes are made to the DB and shown instantly on the page.

In the image for example I would like the user to be able to edit their Bio, Profile Image, and Skills.

What is the best way to tackle this?

[petter]

I’m guessing you’re using Text Fields now. The easiest way is probably to replace the text fields with an Input Field instead, and just change the formatting of the field so that it looks like a regular text field.

For the skills, it looks like a kind of tag system. You might want to check out the plugin called Multi Dropdown, which with some styling can be made to look pretty much like in your example.

[romanmg]

Yes, like @petter suggested, best way is with inputs. You can also swap inputs and text/button if you have more specific formatting, but you can do a lot of formatting with inputs. You basically need to use custom states to switch between formatting (or elements).

I actually have a video on this exact thing: https://youtu.be/go_ZuyCiQFA

Hope it helps!

---

Gaby at Coaching No Code Apps (formerly Coaching Bubble)

Courses & Products, Tutorials, Private Coaching, and High-level Development

Start Learning Today

[marc2]

Thanks @petter Checked out Multi Dropdown and think that’ll be perfect for the tag system. Thanks for recommending

[marc2]

Thanks Gaby. Yourself and @petter have pointed me in the right direction. Awesome community!

[marc2]

That works perfect for Text elements. How would I achieve something similar for Profile Images? I’ve swapped out for Picture Uploader element, but would like a darker overlay on the image (and possibly icon) when in Edit mode, but the overlay of course makes the Picture Uploader unclickable? Is there a workaround? Bit stuck on this one?

[petter]

For this you might consider the Croppie plugin. It’s mainly used to crop images (hence the name), but another advantage is that it gives you more control over the user interface in workflows. What I mean by that is that if you have an overlay on the existing image for example, you can set up a When a User clicks Element Overlay workflow, with an action that tells Croppie to display the Open File dialogue.

[marc2]

Thanks petter. WIll check that out.