Frontend Editing: Managing data rows (e.g. Fieldtype table)

[Lenz]

Hello all,

i have a question regarding the following scenario:

My customer wants to edit a menu card of a restaurant website directly in the frontend.

Each dish / menu is displayed in a row with 4 simple textfields (position nmbr, name, quantity (optional, for drinks) , price).

My customer preferably not only wishes to edit/update existing fields/rows, but also add a new one, delete one, or move an existing one up or down to a new position in the card.

Would these actions be possible per default in the frontend edit mode, if i'd have e.g. a table profield storing the 4 textfields per dish? Or is this only functional in the backend?

In a demo video of a Profield (-> fieldtype table) i saw the requested edit functionality (edit or add a row of fields, drag a row up/down, delete a row, safe) in the backend...

Btw., regarding this concrete use case of a menu card: Would i have to use at all a Profield like table or could i accomplish the task also with a Repeater Field or a Pagetable fieldtype?

In any case at least i don't want to let my customer mess around with a richtext field / inserting a table within CKEditor in the backend...

Maybe there are better approaches than the above mentioned.

 

Edit: I should add, that the site is a static one, equipped with an meanwhile dysfunctional inline frontend editor (that had the capabilitiy of editing, moving, deleting such rows directly inline in the frontend).  Now i want to replace this editor with processwire.

Thanks in advance

[tpr]

Here is what I've made similar to this, using Table and Matrix modules, but the same could be achieved with the built-in Repeater too.

 

[Lenz]

Thanks @tpr for your answer. Good job!

As i can see in your example: The frontend editing is only possible with a modal layer here? Or precisely could the modal layer display the edited page wysiwyg instead of their backend view?

I mean with the build in frontend editor: Is it possible to edit repeaters or table fields directly inline without a modal layer or with a modal layer displaying the page wysiwyg? If so, would i also have CRUD functionality and drag&drop available?

 

[Robin S]

5 hours ago, Lenz said:

Is it possible to edit repeaters or table fields directly inline without a modal layer or with a modal layer displaying the page wysiwyg?

Superusers may edit individual repeater items inline (not in a modal) but non-superusers may not. There's an open issue regarding it (with a possible workaround you can use at your own risk) but based on Ryan's comment here I think he is not inclined to view this as a bug to be fixed.

[tpr]

As I remember I had issues with the inline editing (even if SuperUser) because the site was multilanguage and I had to switch languages in each line. But normally this shouldn't be an issue as this was a special case.

[bernhard]

@Lenz what is so bad about the admin UI? see this post for example using the adminbar module

there is also FREDI and FEEL. not as good as real frontend-editing, i admit, but close

[Lenz]

Thanks a lot @Robin S @tpr @bernhard for your valuable input. I have a few remaining questions

 

6 hours ago, Robin S said:

Superusers may edit individual repeater items inline (not in a modal) but non-superusers may not. There's an open issue regarding it (with a possible workaround you can use at your own risk) but based on Ryan's comment here I think he is not inclined to view this as a bug to be fixed.

 

Does this mean, that i can only edit Repeater items in inline mode and that i haven't CRUD functionality available in inline edit mode? Meaning, i can't add a new repeater, delete a repeater or drag a repeater to a new position? (see my example with the menu card, where every line/dish would be represented with a repeater )

 

1 hour ago, bernhard said:

@Lenz what is so bad about the admin UI? see this post for example using the adminbar module

there is also FREDI and FEEL. not as good as real frontend-editing, i admit, but close

@bernhard Actually nothing is bad about the Admin UI, if you ask me. It looks even good. But unfortunately my clients are accustomed to edit directly inline wysiwyg and don't want to give up this experience...

@all: Let's say if i could convince my customers so they accept FE within Processwire as it is: Do you think that regarding my use case (see my first post) a repeater would do the job perfectly fine or has a Profield like "table" maybe advantages over a Repeater?

Meaning, if i have 4 simple textfield wrapped in a Repeater vs wrapped in a Profield table field: Are these 2 scenarios essentially behave the same or are there differences?

There are round about 100 - 150 entries in the menu card (inclusive beverage)

[bernhard]

you could use the core pagetable field, then you would also have frontend editing. adding and removing items would need some manual work but would not be very hard (send an ajax request, create a page with dummy-data, reload the frontend, double click to edit text)

[Lenz]

hi @bernhard, as for implementing an ajax request: Don't know how to accomplish that, never did this before...wait, no, recalling one incident implementing a registration form with ajax, it was a terrible experience... never got it really working, XAJAX comes to my rescue at that time ...

Regarding the pagetable field for FE: But wouldn't a Repeater work for FE too, if i understand the posts above correctly? Or do you think a pagetable field is a better fit for a special reason?

[bernhard]

7 hours ago, Robin S said:

Superusers may edit individual repeater items inline (not in a modal) but non-superusers may not. There's an open issue regarding it (with a possible workaround you can use at your own risk) but based on Ryan's comment here I think he is not inclined to view this as a bug to be fixed.

as far as i understood this would only be possible for superusers and i would definitely not give your client superuser access...

i think you have those options:

1. profield table
   backend gui, but very clean and easy to manage, 150 items is a lot though
2. repeater
   backend gui, little more "bloated", not sure how this would work for 150 items...
3. pagetable
   you could use FE, but you need to implement add/delete/move functionality on your own. add/delete would be very simple, move would be a little more complicated.
   you could also do the sorting based on the position number (item number, seems to be your first field). that would maybe be not so user friendly.

how do you plan to do the item numbering? automatically? why do you plan to have a field for that?

[Lenz]

the item numbering is actually the dish position number: like Nr 71 | fried chicken | 7,90  like in these chinese cards

edit: Maybe it's indeed better to do the numbering automatically, i agree. The customer said, that he wants to edit the number, but i don't remember at the moment, why...- i defiinitely will clarify this.

It really seems to me, that pagetable is the option to go for me. Thanks for clarification.

Regarding implementing at least add / delete items in inline editing: @bernhard could you point me to some good resources, where i could learn how to accomplish this? - Really thanks for your engagement !

 

 

[bernhard]

the button somethink like this

<a href="./?add=1">add item</a>

the code something like this (in your template)

<?php
if($input->get->add) {
  $parent = $pages->get( your parent page );
  if($parent->addable()) {
    // create a new page and save it
  }
}

// continue with your regular template code
foreach($pages->find('yourselector') as $p) {
  // list your products
  // will already contain your new item
}

you could also make different add-buttons that hold some variables (like category or the like)

---

delete:

<a href="./?delete=123">delete item</a>

and the code:

<?php
if($input->get->delete) {
  // find page that should be deleted
  $p = $pages->get($input->get->delete);
  if($p->id AND $p->trashable()) $pages->trash($p);
}

this would always need a page reload. with ajax the user experience would be much nicer (page not jumping around)

 

hope that helps - but maybe someone has better suggestions

[Lenz]

wow @bernhard. Thanks. Thats a good start.

As for Ajax. Yes, of course i'd like to do the actions without page reloading. Hm, could you point me to a good tut or resource? I haven't enough knowledge how to interact with PW if i want to implement actions the AJAX way...

[bernhard]

ah by the way: you don't need a pagetable if you stay with this solution. you can just store all items under one parent. that makes things a little easier usually

[Robin S]

9 hours ago, Lenz said:

Does this mean, that i can only edit Repeater items in inline mode and that i haven't CRUD functionality available in inline edit mode? Meaning, i can't add a new repeater, delete a repeater or drag a repeater to a new position? (see my example with the menu card, where every line/dish would be represented with a repeater )

I'm a bit confused about exactly what you want to do, but it sounds like the default frontend edit behaviour (where non-superusers edit a repeater field via a modal) is exactly what you need. When your editor goes to edit anything in the repeater on the frontend they get a modal where they can edit any of the fields within a repeater item, add new repeater items, delete them, drag them, etc.

In your template file you surround the entire repeater foreach() with edit tags (editing method C or D) - have you tried this yet?

[Lenz]

@Robin S  haven't try this yet. But you're right, many requirements would be met with your suggestion.

Obviously i'm a bit unclear, indeed: So my wish is to edit directly inline wysiwyg without a modal layer, like you do e.g. with textareas. But meanwhile i learned, that's - at least per default - only possible with textfields or textarea fields, but not with repeaters, table, pagetable, image, file field types. For "complex" field types you have always a modal layer for frontend editing. And the modal layer displays the backend/admin ui edit-view of the field, not wysiwyg / not the page layout.

So to achieve INLINE WYSIWYG frontend editing with CRUD + DRAG functionality, i have to invest quite a bit of hacking - without much knowledge of AJAX, which in turn would almost be necessary to not have page reloads all the time and to resemble the old edit experience...

My customers are accustomed to edit / add / delete and drag data rows/ table rows directly inline wysiwyg and want to retain their edit-experience. But meanwhile, if i see e.g. the demo video of the Profield table field, the backend edit view is really very clear and unbloated. Repeaters are a bit more bloated and scale perhaps not so good as table fields. Perhaps i can convince my customers to go this route.

And the table field should be accessible to frontend editing the same way as repeaters or pagetable fields do, i assume?

[Robin S]

14 minutes ago, Lenz said:

For "complex" field types you have always a modal layer for frontend editing.

Yes, that's what it boils down to basically. There are several reasons for this depending on the fieldtype to be edited, but in the case of a repeater PW has no idea what you are doing in terms of displaying your repeater output on the frontend - it gives you total flexibility there. So PW cannot really provide an inline frontend interface for drag-sorting repeater items for instance, because there is no guarantee you are even presenting all of your repeater subfields contiguously inside a single containing div.

So I think you'll need to resign yourself to modal editing unless you are up for some serious custom frontend interface work.

I'm curious to see the existing interface your client is using - it sounds quite fancy. Maybe you could post a video? (LICEcap is useful)

 

14 minutes ago, Lenz said:

Repeaters are a bit more bloated and scale perhaps not so good as table fields. Perhaps i can convince my customers to go this route.

And the table field should be accessible to frontend editing the same way as repeaters or pagetable fields do, i assume?

Repeaters scale to a medium level fine so long as you use the AJAX-loading setting.

I haven't tried Table with frontend editing but I think any fieldtype becomes editable via a modal.

[Lenz]

Thanks for your explanation, @Robin S makes sense.

Ok, one question: If i have 150 items, should i better go with the Profield table or is a Repeater enough? I really like the nice unbloated editing view of the table field. Does it scale better? Is it also like a Repeater accessible for frontend editing (via modal)?

Video of current fancy editor: Problem is, the editor is not working anymore, so unfortunately i could not show you a video. The editor called unify, but it's not developed anymore and the business around it is gone. It was essentially a ajax frontend without a database for managing content for static sites (directly write into the files). At this point i fear i made a mistake in describing the editing experience: If i remember correctly you actually also have a modal layer, as soon as you edit content - but it loads the page layout - so you edit wysiwyg. Dragging / sorting rows was indeed possible directly inline without a modal though.

Similar editors are https://sitecake.com/  and http://www.coast-cms.de/

but i'd like to use Processwire

edit: Thanks @Robin S for refering to my question regarding table field and frontend editing.

Could perhpaps someone confirm that also the table field is frontend editable?

[Robin S]

1 hour ago, Lenz said:

Ok, one question: If i have 150 items, should i better go with the Profield table or is a Repeater enough? I really like the nice unbloated editing view of the table field. Does it scale better?

The thing that can potentially allow Table to scale up to a very large number of rows is the ability to paginate the rows, both in output and in the admin interface. Pagination is not enabled by default but is an option.

You could probably have 150 rows in an AJAX-loading repeater without a technical issue, but for both Table and Repeater you could have a bit of a usability issue with that number of rows. Imagine dragging a row from bottom to top for instance. And I don't know if that's even possible with a paginated Table interface (how do you drag from the last page to the first?). But these problems seem like they just go with the territory of what you are needing to do and the number of items you need to support.

If you think you will work on more PW projects I'd say it's definitely worth purchasing ProFields. It's fantastic value for money, just for Table and Repeater Matrix alone.

[Lenz]

Thanks again @Robin S. I think i'll go with the Profield. As i understand, it should also be frontend editable via a modal. This way i have the best editing experience and at the same time i support the Development of Processwire.

Thanks @all for your help.

[bernhard]

good choice