The Redwood interview theme has progressed considerably since it was first introduced. As it is the founding design platform for next generation Flow API interviews, not to mention Oracle Visual Builder Cloud applications and all the Fusion applications, it seems a good moment to reflect on what is possible with this Theme today.

This is what the project looks like before the switch of Theme:

I was recently tasked with moving an existing interview from the default theme to Redwood. And these are the things that I recorded in my notebook as I went along:

• Styles Switchover

Some of the standard styles don’t work in the new theme – for example the Comment style, and more importantly, the Question style and Alert style. So much of the first Screen needed to have a new style. Unfortunately for such a busy Screen, the font sizes in Redwood are significantly larger. So this Screen is going to look very untidy.

• Debugger Experience

Of course one of the frustrating things in Oracle Policy Modeling is the lack of support for showing you what your Interview would look like in Redwood – you really have to deploy it, or at the very least debug it, to get an idea. So the first Screen, without the unsupported styles, now looks like this:

• HTML in Questions

Eagle-eyed viewers will notice that the Boolean question at the end also now has an issue. A developer included a link in the original question text. This worked in the default theme, but not in Redwood. So the link will have to be placed in a separate label and one of the acceptable styles used. A minor side effect is that the logo at the start, which does not have a transparent background, now needs one – otherwise we see a background of white pixels which does not match the Redwood “not quite white” background.

I thought about switching the Boolean from a Text Button to a Checkbox. That was not much better and spoiled the layout in the Containers.

• Vertical Buttons and Button Colour

Further experiments meant we learned that vertical button layouts are not part of the Redwood philosophy either. Any finally the Restart button did not take on the same colour scheme (green) as the normal buttons, which is different to the Default theme. There are no options to change this within the Oracle Policy Modeling Styles dialog, as Redwood largely comes as a package, a finished design, so what options there are, basically allow a small degree of control over what is displayed, not how they are displayed.

The options dialog looks rather basic now:

The Next Screen conversion shows clearly the design principles of Redwood, and how it might cause us to rethink our Screen layout -this is the original :

• Responsive Controls and Question Text Placement

The above Screen renders in this way with Redwood:

1. Question text is now embedded inside dropdown questions
2. The first question, which is not in any form of container, takes up the entire width of the page.
3. These two questions are in a container, and the width seems to be respected
4. These button groups look really nice in Redwood, and the question text is above (but with no spacing)

So the second Screen will need a bit of work but nothing too major.

Screen Three makes heavy use of read-only controls in an Entity Container. In the Interview tab, we can see the layout is designed to show rows of data.

At debug or runtime, the result in the Default Theme is as follows:

This is what it looks like in the debugger with Redwood:

• Rendering of Read-Only Controls

In the rendered interview, some changes that we will need to work through.

1. Read-Only Controls are very faintly shown, almost to the point where they are very hard to read. Bizarrely, that disappeared after a few runs so perhaps it was just a cache issue.
2. Because we used a simple read-only Control to display the station names, we get the Column Header repeated in every row now.

The above items are hardly show-stoppers, but it means having to rebuild the respective items as labels with substitution tags instead. Here is a side-by-side comparison with labels:

Removing the Control and leaving just the label does however still leave a common problem. Now there is no header for the column containing the station name:

The advantage of this type of layout, which is very heavily populated with labels, is that it is more likely to render easily in the case of an Oracle Digital Assistant integration.

Now we come to the biggest challenge. The Redwood theme does not support all of the extension capabilities of the default and other themes. If you use any kind of jQuery code or jQuery UI widget, the chances are that it does not work at all. For reference the complete list of what is and what is not supported in Redwood can be found at the end of this page of the online documentation.

• Extensions and jQuery

Good news however, the custom Label extension that shows the map and markers worked straight out of the box. Excellent! The small matter of map resizing is nothing to do with Redwood so this Screen is a 10/10.

The presence of jQuery and jQuery UI, however, stopped the final Screen from functioning. Nothing was rendered at all. A blank Screen. The jquery.dialog() function that rendered the pop-up graphical PDF had to be replaced with pure JavaScript. In this case, HTML5 came to the rescue since it has a <dialog> element which can contain a <form> and can be called to present a modal dialog to the user. It looks ugly because we haven’t done any styling yet, but it does the job. The old code is replaced with various bits of injection to create the dialog:

Now the last Screen renders (once we remove jQuery and jQuery UI files and references to “$” from our code of course).

So the dialog is back – in HTML5 and native JavaScript.

• Cache / Display Differences

Whilst working with this deployed project, we eventually also found out that the rendering in the Debugger (IE11, remember) is actually prettier (in our opinion) to that of Chrome or Edge. We also repeatedly ran into cache issues and ended up deactivating the cache to be sure we knew what we would get. For example:

In case you think we are cheating, just to prove it, the Step # is an input and you can “see” it when you try and select it in IE11 (which allows selection of read-only items):

In Chrome, it looked like this (deployed) which is more logical (the Step # is a disabled input) but looks less attractive (subjective I know) and will require changing the Step # to a label as well no doubt :

We have not got to the bottom of that inconsistent behaviour but it is causing us some concern.

So that just about wraps up our little conversion example. Watch out for the changes that might bite you, but the end result is pretty nice and of course will fit right in to your next-generation plans!!

REMINDER : Please take a moment to complete our survey!