Faster Ways To Do PeopleSoft Fluid UI Development

April 6, 2015

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:

// ==UserScript==
// @name         Fluid UI Custom
// @namespace    denbuzze
// @version      0.1
// @description  Load local JavaScript and CSS
// @author       Developer Blog
// @match        *://*/*
// @require      file:///Users/christian/Projects/sis-custom/dist/sis_cs.js
// @resource     sis_cs file:///Users/christian/Projects/sis-custom/dist/sis_cs.css
// @grant        GM_addStyle
// @grant        GM_getResourceText
// ==/UserScript==

var sis_cs = GM_getResourceText("sis_cs");
GM_addStyle(sis_cs);

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.

Developer Blog