My name is Rahul Saini. Yay! ? I have successfully completed phase 1 of my GSoC project with the Joomla organization. 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 so far.

What is Joomla?

Joomla! is an award-winning content management system (CMS), which enables you to build websites and powerful online applications.
Joomla allows you to make secure and extensible websites. Within minutes, you can get your website with full control in your hands. You can launch a new website from Joomla! Launch. The best part about Joomla is that it is open-source.
On a Joomla website, there is a main page that users can visit and an admin panel to tweak the main page. Below: a quick tour of the Joomla administrator panel and website.
A quick tour of the Joomla administrator panel and website.

Context

Joomla provides two ways to modify and extend a website. One, using the administrator panel, which is the primary way. Alternatively, you can modify the front-end from the front-end. For example, If there is a typing error in some article, the users can edit it without leaving the front-end. Another example, let’s say the banners are at the bottom of the page and that is not where you want. You want it at the top of the page. So, you get the option to do so in the front-end.

Motivation

Inline editing is one step further in front-end editing. Joomla’s front-end is divided into several modules and one main component. Every time you need to edit something, Joomla redirects you to a form with some pre-filled values. The idea of inline editing is to not render the complete form which contains all the settings when you want to change only one field. If there is a typo, click on the word and fix it easily. No need to go to a different page and then search for the field you wanted to change. This project aims at providing the functionality to make small changes, but quickly and without any page reload.

Proof of concept

Though I was fascinated by the idea of editing stuff inline, this idea was not originally mine. A Pull Request to show that it is possible was drafted at the Joomla GitHub repository. The purpose of this PR was to motivate the Joomla community for inline editing. Also, Joomla already has front-end editing, it is a proof that it can also provide the inline edition of the front-end editing.

Goals

The Joomla front-end can be roughly divided into three main parts. So, the project aims at making these parts of a Joomla website inline editable.

• Article Title and its Body,
• Module’s Title and its Content,
• Custom fields.

Joomla Learning

Joomla Docs are great. There are so many things a well-written doc can teach you. In the past month, the keyword ‘Joomla docs’ has spiked up in my Google search.
To get started with Joomla development, you need some knowledge of PHP and some understanding of MVC design pattern. In the beginning, I followed the Joomla 3 MVC component development series. Although I didn’t grasp all the concepts, I did follow the whole tutorial. At this point, I didn’t know all the working parts of Joomla, But I knew where I might find a file related to some feature. And that’s all you need to start fixing some good-first-issues. So, I went on to fix some issues from the Joomla GitHub repository.

Early idea/approach.

As soon as I got to know about the MVC pattern, I thought to myself I will create new Controllers(to handle incoming requests), modify some Views(to render an input field on the onClick Browser Event), and write a Model to save one field to the database. This was all my approach to add the inline editing. This is what I mostly did in phase one. This approach is not wrong, It would always work perfectly fine. But it needs some modifications to make it reusable. You can read about it in my second blog.

What’s done

Article Title, Article Body, and Custom text fields are inline editable now. Below: A quick video of the experience.
Recording of Inline Editing experience

GitHub Pull Request Text Custom Field and Article inline editable · Pull Request
This is the GitHub Repository if you want to follow the development.

The Coding Part Summary

i) Making Articles inline editable

• A controller to handle requests with one field (the default controller expects a full form)
• A model to validate and save one field (the default model validates and saves the full form)
• Added the link to the relevant controller and the class inline-editable to the inline editable fields. A JavaScript script loops through all the elements containing this class. It adds onClick events to these HTML elements and makes a request to the relevant controller when an element is focused out.

ii) Making Custom Text Fields inline editable

• All the above three steps were performed in this case too. Except for JavaScript code, this part was reused.

The way ahead

I will now refactor the code I wrote. The main focus will be on making it easy to add Inline Editing for other core and 3rd party Components. The next goal will be making Custom Fields inline editable, and then Modules.

Thanks

I want to thank Joomla, my mentors, and Google for providing me with this challenging and learning opportunity.