For developers who primarily work on backend code, building UI is a necessary evil. Generally, we're not building pixel-perfect renditions of meticulous designs. Instead, we're attempting to efficiently produce a basic flow of operation that feels intuitive and guides the user toward the next steps.
Due to the nature of projects, we won't always need things like modal dialogs in every project. We're not even going to need DOM manipulation in many cases. But when we do, we get to blow the cobwebs off our JavaScript skills.
Over time, I learned to use the AI code generator as my first tool. While the generated code is often imperfect, we can start with a significant chunk of code already fitting the bill by providing some details in the prompt paired with the context the tool observes in the codebase.
Doing this first, followed by revision and refinement, yields a much more efficient programming flow than coming up with all of that code and structure from scratch. In this case, leveraging the AI code generator reduced the development time by at least 50%.
Creating a Modal Dialog to Select and Delete Users
In my latest experiment, I used Augment Code in VSCode to construct a modal dialog flow.
My client needed to be able to select users in a grid view for deletion, with a strong confirmation step on the way. I wanted to apply a select all/none feature, have the modal pop up, and require the user to type a specific bit of text to continue this destructive operation.
Instead of asking Augment for all of the code all at once, I broke that into two basic components:
Select All/None
First, select all/none. I already had a checkbox for each row's selection, so I prompted Augment:
In DOMContentLoaded, I need to add a check box to the top of the first column of the table with the "datagrid" class. When selected, it will be a select-all/select-none for the .check-select boxes in the rows.
Generally, this worked well. I got the structure of the events that needed to be handled, and mostly, it worked correctly.
The AI did not quite suss out how I used the checkbox values to submit a form, but that was an easy revision, causing this to be operational within minutes.
Confirmation Modal with User Input
Next, the confirmation dialog:
When the bulk-action-form gets submitted, we need to have a confirmation step. I want to show a modal dialog that says "This action will remove all of these users' records and cannot be undone. If you would like to continue, type 'permanently delete' into the box below and click Proceed." The modal dialog should have a box for input, and a Proceed button that completes the normal submission of the form.
Now we're getting more specific. The markup for the modal dialog was added to the template, the validation for the text input received some JS code, and the Proceed button was enabled/disabled according to the input validity.
Very usable code came from very little prompting.
Bootstrap Adjustments and UX Details
The template on this project uses the Bootstrap framework. The AI must have gathered from context clues, as it correctly constructed the modal for that layout.
However, I needed the dialog to be at the body-tag level instead of nested well within that view's template. I asked Augment to revise accordingly:
Due to the bootstrap template I'm using, I need the modal dialog to be attached to the body tag.
Some cracks started to show here. The AI's first attempt moved the markup for the modal to JS, making the element completely dynamic. Due to some other details that I was applying later, such as Babel-fueled translations, that would make the code much messier overall.
I called an audible here, moved back to the template markup, and asked Augment Code to simply detach the dialog and attach it to body, which was much more straightforward.
Finally, thinking through what actions should be available on/around the grid when the user is selecting records to remove, I wanted to apply some additional help:
When the bulk-action select has a value, bulk-submit should be enabled (otherwise disabled). Also, a semi-opaque div should be placed to obscure "div.datagrid form.header", so the user can't use those controls until finishing the bulk action (or clearing it).
Both of these were applied successfully without the need for revision.
AI Reduces Development Time
Overall, using these prompts likely cut the development time by 50-60%.
Testing, revision, and refinement remain a time-consuming and integral part of the development process. But having code to start with cuts out the writer's block part of development and takes away some of the "how did I do that before" guesswork.