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:
- SIS Custom: framework to concatenate, minify, autoprefix and precompile your assets.
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.
- Install Tampermonkey
- Allow for local files on the
- Click on the Tampermonkey icon and select Add a new script
- Add the following code:
@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.
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:
- 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.
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.
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.