/api/jsonws Styling Customization

Using a CustomJspBag to change the styling of the /api/jsonws discovery panel

So the last couple of days I've been working on a new React Headless app that I'm going to be sharing soon, but for various reasons I've had to refer to the /api/jsonws page to check out the classic APIs there that are still available.

Just as a bit of background, I have an awesome 27" iMac that I do all of my development on. I love it so much that I purchased an additional Apple 27" monitor for it, so they sit side by side and provide tons of real estate to work on.

On one side I'll be running Intellij Ultimate and it will take over a whole monitor. The other monitor I'll have my browsers up (also wide screen), slack, email, etc. I don't really get fancy on the window positioning, most of the time each app is full screen and I'll just flip around.

So with that background, I hope you'll understand that when I went to http://localhost:8080/api/jsonws, I really didn't like what I saw:

So with my wide screen browser window, you can hopefully see how it's using somewhere between 25% - 33% of the full page. The categories on the left side are oddly breaking and wrapping, and it's really a waste of screen.

When I execute the "get-companies" sample, here's how it looks (sides chopped but they're definitely still there):

So still kind of squished.

I'm like, "Hey I'm a developer, I can fix this..." I use Chrome to inspect the dom and come to find out the content panel has a fixed width of 960px. I'm sure that's great if you're developing on your iPad Air, but I didn't like it at all.

Being a developer, I know that I'm going to have to override this. Initially my fear was that the theme was controlling the view of this page. I could do a theme, but this is just local development. Normally I'm good w/ just HSQL for the database, the embedded Elasticsearch and the Classic theme. Last thing I want to do is build out a custom theme just so I take advantage of my wide monitor.

So I start by going to the portal source where the /api/jsonws views are generated: https://github.com/liferay/liferay-portal/tree/master/portal-web/docroot/html/portal/api/jsonws

I go right away into index.jsp only to find the following:

<%@ include file="/html/portal/api/jsonws/init.jsp" %>

<c:if test="<%= PropsValues.JSONWS_WEB_SERVICE_API_DISCOVERABLE %>">
	<style>
		<%@ include file="/html/portal/api/jsonws/css.jspf" %>
	</style>
	<div id="wrapper">
		<header id="banner" role="banner">
			<div id="heading">
            ...

The awesome part is the include of a .jspf file into the <style /> tag. I check the css.jspf and sure enough, all of the style rules for the /api/jsonws page(s) are in that file.

So now that I know how the styles are applied, I know I can fix this.

I created a new Liferay Gradle Workspace using the Blade tool, created a new module, created my CustomJspBag, then started tweaking the css.jspf file I copied in to get the view I wanted...

By the time I was done, I had a view I was much happier with:

No wrapping of the categories, plenty of space. The get-companies also looks better:

I can see more of the result JSON...

The project itself is pretty simple, one Java source file for the CustomJspBag implementation and one css.jspf file with the altered style rules.

I've shared the project on Github: https://github.com/dnebing/jsonws-style-override

The project itself targets Liferay 7.2, although it is easy to build it for 7.0 or 7.1. Just tweak the module's build.gradle file to use versions of portal-impl and portal-kernel for the environment you're targeting and you should be good to go.

Blogs