How I created a Page Anchor Navigation Plugin in Oracle APEX
I'm a APEX Senior developer who likes write down what I discover to keep a part of my mind stored and share my knowing with others.
Hellow folks! Today I prepared something different, more like a documentation step-by-step of how I build my first public APEX plugin! The idea for this plugin came up when I was working on a large form and noticed that navigating between regions and fields was quite a nightmare, especially when reading the form content. So, I decided to improve the UX by creating a new side-column region template.
After some research to create that region, I noticed that I was lowkey developing a plugin. So... Why not? XD
🧭 What is Page Anchor Navigation (PAN)
They say that an image is worth 1000 words:
The colors are a little opaque because of .gif compression.
PAN is essentially a page content explorer that lists and highlights all the content you want (including regions and fields) on the side of the page as you scroll or click. It's especially useful for large pages with a lot of content.
PAN also supports nested levels, allowing you to create a tree-view-like structure so users can better understand the sections. While you are in a section that is a child of another, both will still be highlighted, which is pretty cool XD.
All the colors can be customized in the page designer, allowing them to match your theme colors without any coding required.
All you need to create the list is assign a STATIC ID (any you prefer) and add the CSS class js-pan-{level} to the region or other page component you want to list.
Yeah, it's as simple as that. You can find all the documentation of the features with much more detail in the PAN github repo.
🔨 How was it built?
As I mentioned earlier, it was having a bad time scrolling over a large page and after some research I decided to make a free use reusable plugin. I made the core region template using data-* approach to store the configs and decided the name of main css classes. With the CSS classes defined, I could just use JS to do the hard work while the user doesn't need to worry about filling more fields in the page designer.
After that, I worked on the JS functions, which are documented in the repo. I fixed some bugs like rendering timing, highlighting issues, and calculations of front-end boundaries, among others. It was the core of the plugin, so naturally, it was where I spent the most time. After this, I focused on making it secure for use in production environments, so I developed a whitelist using regex to ensure greater security.
I visited sites like ANT Design and MDN to get inspiration for creating the CSS file and bringing everything together with style!
As I was testing, I noticed some small adjustments to make, so I started working on the parameters. I added parameters for highlight start, animation, whether the parent is highlighted or not, and all the colors, making it easy to customize without any code.
Conclusion
It was a delightful experience! I even returned to my GitHub account, which had been abandoned for a looooooong time. I hope to change that from now on.
I am also planning to bring more plugins and contribute more ideas to the plugin developers community! And as always,
