Skip to main content

We have 3 different FME servers, how can we modify the FLOW UI so that you can easily distinguish one server from the other?

Your mileage may vary, but you can go into the tomcat\webapps\fmeserver folder in your installation directory and amend the underlying html.

For example, in 

C:\Program Files\FMEFlow\Utilities\tomcat\webapps\fmeserver\WEB-INF\jsp\login.jsp

You can add elements to the login page. To add the Locus logo I can add a new image below the Flow logo:

<c:if test="${config.titleContent == 'FMESERVER'}">
<script>
document.title = bundlee'loginTitle'];
</script>
<img src="${pageContext.request.contextPath}/images/Logo-FME-Flow.svg" alt="Image" height="45px"/>
<img src="https://locusglobal.com/wp-content/uploads/2021/02/logo.png" alt="Image" height="45px"/>
</c:if>

and that will give you:
 

 

 

Past the login page it gets quite a bit harder and more complicated, but still possible.At this point you’re dealing with compiled angular javascript.

The below contains most of the front end code for the main ui

C:\Program Files\FMEFlow\Utilities\tomcat\webapps\fmeserver\dist\angular-frontend\main.f56c2513c293c2d4.js

In here you can change the colors, add additional logos etc.

As I mentioned, your mileage may vary, and just because you’ve changed one part of the file, doesn’t mean the style/image is being set elsewhere.

 

 

I think it would be worth you submitting an idea for there to be some basic out of the box styling to quickly facilitate different environments - https://community.safe.com/ideas

 


If you don’t want to get into the backend code like ​@hkingsbury and I like to do. You can always create a broadcast message on the home page.

It certainly is not as cool, and won’t show up in server apps, where changes to login and internal logos flows through to everything. But it is certainly quick to implement.

 

Or you can replace fme-logo.png in <FMEFlowDIr>\Utilities\tomcat\webapps\fmeserver\images\

But you would need to make sure it is the same size, otherwise you would need to change other css files.


In this post ​@egge explains how to change the colour of the bar on the left hand side: 

 


I’ve created an idea for this here:
 

 


Reply