My name is Rahul Saini. I am a final year Computer Science undergraduate at IIT Mandi. I am working on “The Front-end Inline Editing” feature for Joomla 4. Here is my journey.

(originally published at https://github.com/joomla-projects/gsoc21_frontend-inline-editing/issues/10 )

This repository contains all the work done on Front-end Inline Editing GSoC 2021 Project.

The Inline Editing is new in Joomla. Although the project covers a major portion, there is room for improvement. This Issue attempts to explain the work done in such a way so that anyone can continue expanding Inline editing in Joomla by reusing my work and research.

Aim 

This project aims to allow users to quickly edit the content of different components and modules of their websites without having to leave the front-end or going to a different page. This will save time when small changes need to be made. Normally if there is a typo on the page, one has to first check whether it is in the article's heading, its content, module title, module's content, banner, etc. And then open the corresponding edit page of the component.

This project made it easier to edit the content of a website. This project will also be helpful when the user wants to see the end product while modifying the page.

End Product

Following are some screenshots of Inline editing in action.

IMG: Inline editing for check-boxes

IMG: Inline editing for list field

Pull Requests

PR 1

Link

Video demo: https://youtu.be/uwMFHd2T5WU 

It contains my first approach. All the work done here is explained in detail in my first blog.

I will try to summarize it. This covered the text field and editor field. It Focused only on one component, com_content.

PR 2

Link

Video demo: https://youtu.be/Dgz-qfxJtW0 

It contains the second and final approach. Some of the code from the First approach is reused here. The first approach didn't fit well in Joomla's workflow and ways of doing things. So, Some code refactoring was done to cover all the cases.

The initial idea of the code refactoring was made by Anibal Sanchez via this GitHub Issue. The final implemented approach is explained below.

The Final Approach

Standard forms behavior

Joomla offers a form and fields library. It is secure and easier to use. Does the client-side and server-side validation for you.

Using an XML file, all the fields can be defined. In normal editing, the users create a template and render the fields using the methods provided by the forms library.

Inline editing

In the end, It was noticed that Inline Editing is the same as editing one field at a time. So, the target became to extend the functionality of existing libraries. I worked and provided the inline version of each field. In normal editing, the users create a template and render these fields using the methods provided by the forms library. Now, the XML fields definition can be used to render the inline-editable fields.

How does it work?

For Articles

administrator/components/com_content/src/Service/HTML/InlineEditing.php: This inline editing service prepares the front-end for inline editing. Every inline editable content on the front-end has a unique class name. This service also adds a browser script. That script will loop through all the inline editable content and add click event-listeners to these. You can use this service to mark the inline editable content as shown in the following image.

Now, the article title is inline editable. Wherever you would like to use the inline-editable version of the field, you do the similar changes as I have done here for the article title.

For custom fields

Similar to articles, custom fields are made inline editable. See the following image.

These changes make the text area custom field inline editable. Notice that Custom fields always try to find the inline editing service. If the step fails, the custom fields are rendered normally.

How can you provide inline editing for your component?

administrator/components/com_content/src/Service/HTML/InlineEditing.php

You take this file and make appropriate changes here. Like this, you will have an inline editing HTML service for your own component. At this point, custom fields used in your component are inline editable. To extend inline editing for other parts of your website, you can use this service as I have shown for the article title above.

If you wish to make other fields inline editable

As of now, the text, text-area, check-boxes, radio, and lists are inline editable.

You would be extending the work done in Pull Request 9.

I will explain it using the color field as an example.

At this point, If you make a color field inline editable using the inline editing service, it would successfully fetch the field HTML, and would also successfully save the data. This applies to all the non-supported inline editable fields.

I didn't add the color field to the list of the supported fields, because it wouldn't render the color picker. It requires a script to render the color picker.

So, a solution would require changes possible in the following files.

1. build/media_source/system/js/inline-editing.es6.js,
2. libraries/src/MVC/Controller/FormController.php#L451, and
3. libraries/src/Form/Field/ColorField.php files.

In the ColorField.php, you would declare a property $scripts array. This would contain the list of all the scripts required for rendering a color field. With the JSON response, you can send back the $scripts array. It will be used by inline-editing.es6.js to dynamically add scripts to the webpage. That's the basic idea.

Thanks for reading.