Salesforce Developer Console — Developing Query Editor using LWC in 30 min.

It seems to be a boring idea to create something which is already present and doing its job exceptionally well. The query Editor of the Salesforce Developer console is already cool. Also, a lot of browser extensions are available which do the same thing. You might ask, Why do we need to re-create it?

I also had the same question. Also, I already had created a chrome extension for the same purpose. So, re-creation won’t be that interesting.

BUT… as we all should know, if things are not interesting, make them interesting.

So, I pinged some of my colleagues to find out, How much time, they would have taken, if they would be developing this project? I got responses like a day, half-day, few hours, etc, and one of the responses, I received was 30 minutes using LWC. I was like, really!! This is called a challenge. Let’s do it.

I started with the basic thing, which is creating the LWC component in VS code. Now, it’s time to list down the use cases which we need to cover.

1. writing the SOQL on any object and showing results dynamically
2. delete any record.
3. update any record.
4. refresh the view, once any DML happened.

Have not considered the “add new record” functionally as of now, because it’s gonna take more time. Can be added once the framework is ready. After all it’s a personal project. :P

Let’s create an apex controller first. We need at least 2 methods.

• A method to get records using SOQL.

• To perform DML (delete, update, etc)

Now, let’s jump to LWC’s Template View. We need a similar view.

We have below events,

1. Search — SOQL search
2. Delete — delete records
3. Save — update Records
4. On Search, a dynamic table should be shown.

Now, let’s code the magic, that is, the middleware, LWC Js controller.

For each event, we need an event handler.

Search

Delete

Save

After every click — Populating Dynamic table

for this, we can reuse the search event again, as it does nothing but queries and refreshes data.

And now, let’s check, how it works…

And a small comparison

And the challenge ended.

Tough day at work!!

Complete code :

https://github.com/vimaltiwari2612/SOQL-Query-Editor-LWC