React.js + PeopleSoft = Love?

After taking a look at Kibana dashboards, I was curious how PeopleSoft managed to pull them back into the portal. The expectations were high: some kind of a fancy built-in function or Integration Broker wizardry, but it turned out to be plain old iframes. This is a great solution to marry a modern front-end framework and PeopleSoft. Can it be used for building a simple React + PS proof-of-concept (PoC)?
Can we build a simple React-based single-page application and make it render in PeopleSoft? Turns out - definitely yes! Overall solution might look as follows:


PeopleSoft Internet Architecture portal user accesses a Fluid UI component that in turn renders the iframe containing the single-page-application (SPA). The iframe then forwards the required information to the SPA for display. SPA would be deployed to a static hosting, such as Amazon Web Services S3 bucket. This opens an entire range of solutions: dashboards, graphs or simply a user-friendly UI developed by a 3rd party.

For enterprise development, it's hard to survive without a robust and rich component library. While there are many options, I can't resist using PrimeReact. It is a fantastic set of tools that I've been using since Java EE / JPA days. Take a look at the PrimeReact demo to see what's possible! The main focus of this tool is to provide developers with a rich set of pre-built UI widgets to focus on building the business logic. In my world that's amounts to productivity on steroids!

To develop React app, a few magic commands:

$ create-react-app react-demo
$ npm install primereact --save
$ npm install classnames --save

and the project harness is ready.  Let's keep React app is simple for this PoC - just a single page reading request parameters:


A bit more Node magic:

$ npm run build

and the app is ready to be deployed:

 
I did try to push the content to Oracle Cloud Infrastructure, but failed... OCI UI doesn't allow folder upload, and OCI Python-based command line tool kept complaining about various random settings. I ended up picking Amazon Web Services S3 instead. No offense Oracle, AWS is not ideal either, but at least you can find good documentation and push the content without any hiccups.

Make sure that AWS S3 bucket is set for public access and web hosting on it is enabled:


Bucket policy also needs to be configured:


and lastly, enable cross-origin resource sharing:


Now, React SPA is ready to be pushed:


We can access the app to see that it's working:


It is time to include this app in PeopleSoft. For this, we can built a simple FluidUI component with a single page holding an HTML area where iframe would be rendered


After the standard component registration process, we can add tile to the homepage and hit the component:


This PoC solution might be not perfect. A few important topics are not addressed:
  • How can we push data back to PeopleSoft from the React app? Do we have to go through IB, or can we leverage IScripts instead?
  • How should we secure React app? It's not ideal to have direct access to it. Should we use API keys or some form of tokens? Here is a great overview of one such option: https://pe0ples0ft.blogspot.com/2020/07/858-kibana-3.html
  • URL length is limited to 2000 characters, need to keep this in mind when building iframe HTML
  • Would iframes constitute the best option? Can we embed HTML5 objects or perhaps build a WebAssembly directly out of PeopleCode should Oracle choose to support it?

Popular posts from this blog

Building an ML pipeline with ElasticSearch - Part 1

Image
ElasticSearch (ES) makes it easier than ever to explore PeopleSoft data. Prior to ES, the two ways to access the data were integration or direct SQL access. Both are came with some downsides. Integration is always hard - it requires development of an App Engine or Integration Broker service. SQL access imposes security risks as it requires direct connection to the underlying database. ElasticSearch is a great solution for this problem.
Read more

Stitching PeopleSoft and SharePoint

Image
We often need to integrate legacy solutions with more modern counterparts. This gets particularly tricky for systems like PeopleSoft as they live in their own tech bubbles, which are usually decades old despite the attempts of the vendor's to maintain and make them current. This integration is not the easiest journey.
Read more