Faster Ways To Do PeopleSoft Fluid UI Development
PeopleSoft Fluid UI Development
Developing pages in PeopleSoft Fluid UI can be pretty time consuming and cumbersome.
In this post we’ll explain 2 ways to make your workflow better & faster:
- Tampermonkey: loading local CSS & JavaScript on your Fluid UI page.
- SIS Custom: framework to concatenate, minify, autoprefix and precompile your assets.
1. Tampermonkey
Most of the times you probably prefer to not use PeopleSoft App Designer when modifying files. This will allow you to use your favorite editor and have a faster save-reload cycle.
The main plug-in we’ll be using is called Tampermonkey (Google Chrome) which allows you to load custom CSS & JavaScript on any page. If you’re using FireFox, check out Greasemonkey.
Installation
- Install Tampermonkey
- Allow for local files on the
chrome://extensions
page.
Create Script
- Click on the Tampermonkey icon and select Add a new script
- Add the following code:
You’ll need to update the location of your local JavaScript and CSS scripts in the @resource
and @require
attributes. You can also update the @match
attribute if you want to only load these files on certain pages, have a look at the @match patterns site if you do.
Add CSS / JavaScript to PeopleSoft
As soon as you’re finished with your local custom CSS & JS, you should move it to the actual PeopleSoft code. Feel free to check out some recommended steps.
2. SIS Custom
Loading custom JS & CSS locally is just the first step in improving your workflow. Usually you’ll also want to make sure you don’t have to save code in 1 file and you’ll want some other optimization steps like:
- Concatenation
- Minification
- Autoprefixing (Browser prefixes)
- Precompilation (SASS)
- Opimization (Images)
Have a look at the installation instructions and our other docs.
SIS Custom Build
In order to make the lifes easier for non front-end devs, we also developed a heroku app called SIS Custom Build.
This tool will automatically run the SIS Custom build as soon as we push our changes to GitHub. We’re using GitHub Webhooks which will trigger the build.
When the build is complete it makes all the assets available in the following format:
- List of files
- Zip file
That way to other devs can easily see & download the latest version of the files.
Next steps
These are a couple of things we’re currently dreaming of:
- Find a way to use LiveReload or BrowserSync with Tampermonkey. That way we wouldn’t have to manually reload the browser every time.
- Automatically add the CSS / JavaScript and images to PeopleSoft when pushing to GitHub.
Conclusion
We should always use the best tool for the job and being productive as a developer should be an important focus.
I hope you’ll be able to use this in your daily development workflow and if you have any remarks / comments, feel free to contact me on twitter.