Fluid UI - Working with Grids - Part 4 - Styling Stacked Grids

There were some interesting requirements posted by a reader in the following blog post.

Refer: Fluid UI - Working with Grids

Requirement 1: How to align the elements in a column to 'top' in a Stacked Grid

Let us say, we have a two Stacked columns with different number of elements/fields in each Stack as shown in example - Responsive Flex Grid with 2 Columns. As we can see in the screenshot below, the first Stacked column contains 3 fields and the second Stacked column contains 2 fields.

Since the second Stacked column only contains 2 fields and they are centered from a vertical position point of view, they don't line up with the fields in the first Stacked column.

If we want to align the fields in the second Stacked column to the top, we can achieve that with the following CSS.

I really like the nth-child() CSS3 selector. The idea is to only apply the CSS to a particular child element and not all. In our case, I only wanted to apply the CSS to the second column <td> element with "ps_grid-cell" class as shown below.

You can find more details on the nth-child() selector in the following blog post.

https://support.awesome-table.com/hc/en-us/articles/115001393209-Add-style-to-specific-columns-or-rows-in-your-Table-view

Note: The CSS provided above is added to the page using the following Page Activate PeopleCode.

Requirement 2: How to align specific fields (elements) in a Stacked Column to the Right

Let us say, we want to right justify specific fields in a Stacked Column. For example, we want to right justify the EFF_STATUS field.

We can achieve this by simply identifying the the id value (or part of it) and apply a wildcard CSS selector that contains this value as shown in the following CSS.

The wildcard for the id is required in this case due to the window and grid row numbering that is prefixed and suffixed to the record field name to generate the id value.

Requirement 3: How to align a specific Stacked Column to the Right

Let us extend the previous requirement and say that we want to align the entire second Stacked column (including the Label) to the right.

We can simply achieve this by using the following updated CSS:

Result

Project Details

All examples in this blog post were built on the project provided in Fluid UI - Working with Grids.

Integration Broker - SOAP Web Services

Question from PeopleSoft General Discussion forum:
"I am looking for an example of where I can submit a Synchronous message that includes SOAP ACTION in header and body..."

Refer: https://community.oracle.com/message/15427975

If we want an example of how we need to invoke a PeopleSoft SOAP web service, we can start by using the 'Generate SOAP Template' feature within Integration Broker.

Generate SOAP Template from the Service Definition

There is an option on the Service Definition page to "Generate SOAP Template" messages. This will give us an idea of how to construct the request message.

Notes

• I like the fact that template message includes the <soapenv:Header> information. This is particularly helpful because if we load the web service into SoapUI and generate a sample/new REQUEST, it does not include the SOAP header in the XML window/view.

• If we ever decide to copy the template SOAP Request Message from PIA page and paste it into SoapUI, we will more than likely run into the following error.

Error: Integration Gateway failed while processing the message

This is because the PIA page contains additional HTML markup - used to display the formatted SOAP message, which pollutes the actual XML contents as we can see below.

We can overcome this issue by using the 'Invoke Service Operation' button on the 'SOAP Message Template' page and copying the REQUEST contents from the editable textarea in the SOAP Tester page.

• While I like the fact that the REQUEST message contains the necessary SOAP header with the WS-Security information, I don't really like that it is also included in the RESPONSE message. I cannot think of any use case where the WS-Security will be part of a SOAP RESPONSE message.

Using HTTP Log in SoapUI

There is a fantastic feature within SoapUI which provides the entire HTTP log of the web service request/response. This is very handy to understand where the message is POSTed (basically all SOAP transactions are HTTP POST requests with a "SOAPAction" header); and to see the headers in the HTTP request and the entire response including HTTP status code, etc.

I thought I would share these utilities because I use them a lot to provide details to anyone who is consuming a PeopleSoft SOAP web service.