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.
- 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)
When the build is complete it makes all the assets available in the following format:
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.