These tools combined offer a good workflow, but also depend on having these tools installed on your laptop. Sometimes you might not be on your laptop and need to make a change to a file, or sometimes you company might not allow Node JS to be installed on your laptop, or installing/using APEX Nitro might just be one step too far for you. When this is the case, making changes to these files is quite an arduous task.
Since we’re a company that focuses on improving end user productivity through good design, we decided to solve this issue. How you might ask, since this is the APEX builder and we have no control? Well, you actually have more control than you think, thanks to modern browser extensions! We’re introducing a new one for the APEX community that its sole purpose is for APEX Builder improvements for regular APEX applications. It’s called the “APEX Builder Extension by FOS”. If you’re wondering who/what FOS is, well it’s simply an acronym for “FOEX Open Source”.
It’s free to use and open-source, no strings attached! Simply click on the button below to add to your browser. You can also find the project on Github if you want to take a look behind the scenes.
Create and edit static application, workspace and plug-in files
Once you’ve installed the extension, on each of these 3 pages you will find a new region, called “Edit Files.” Either choose a file from the dropdown list to open it, or click the “Add File” button to create a new one. You can then edit your file, and click the save icon to save it. No page submit required.
Enjoying editing one file? Try editing 2 files. Although… why stop there?
Fullscreen mode and keyboard shortcuts
The extension attempts to provide as good of a programming experience as possible, so in order to feel more like editing in a conventional editor, you can enter fullscreen mode. You now have a better, more focused view, and can’t accidentally scroll beyond the editor. Want to exit fullscreen mode? Hit Escape. Another handy shortcut is crtl-s on Windows, or cmd-s on Mac. While having the focus in an editor, hit this shortcut just like you would on a desktop editor, and your changes will be saved.
There’s also functionality for compiling Less files. This is already possible via the Theme Roller, but we’re bringing this functionality to the static files as well. Just click the “Run” icon and your file will be compiled. You should then see a .css version of your file appear in the select list. In the future we’re looking to include SASS compilation too.
How did we get this to work?
In short, we fetch the file contents by leveraging the already present file download links on the page, and behind the scenes open and submit the Upload File(s) page to save the newly updated content. There’s nothing additional that we do code wise to save the files on the backend, it’s all handled by the APEX engine. It’s really fast too, so you probably won’t even notice it, since we’re doing this without submitting/reloading the page i.e. Single Page Design style, which is how we’ve been designing and building the majority of our APEX applications for years. We know APEX inside and out!
Roadmap, technical details, and more
There’s a number of things we’re looking at doing, you can see the Github page for more details. You can log your own feature requests and report any bugs/issues there too. Stefan Dobre is the lead developer on this project and really passionate about APEX & super talented! You can follow him on twitter and read his APEX ramblings on his blog. We’ve got him working on quite a few interesting things that you might find very helpful in the near future, so keep an eye out for his tweets and posts.
We hope you find this extension useful and are looking forward to your feedback.