Solved

Using a custom pre-configured header/footer when creating a FME server workspace app from scratch.

F
Badge

Hi together,

 

I am wondering if it is possible to pre-configure the favicon, header and footer section whenever we build a new FME workspace app on FME server.

 

The idea is to replace the generic FME server icon and to replace it with our corporate color(s) + icons and a custom footer (e.g. our contact details) in a way that anytime we create a new workspace we would not have to reapply the color scheme, icons, favicon etc.

 

Is this possible via an out-of-the-box FME server workspace app (e.g. configuring this from the backend on the server machine)? Do you know?

imageMany thanks and kind regards!

Ferid

icon

Best answer by fungergis 25 January 2022, 09:41

View original

11 replies

chrisatsafe
Rank
Badge +2

Hi @fungergis​ ,

 

This is a great suggestion! At the moment I don't believe this is possible or on the roadmap but having the ability to preset the banner, header, and footer as a default configuration seems like it would be useful in ensuring apps look and feel consistent across your organization.

 

Would you be able to share this suggestion on the Ideas page? I can definitely see how it would be a time-saver (for myself included) to have some sort of template that pre-populates the "Customize" parameters. Perhaps in the customize section, there could be a "Preset" option similar to how transformers have Presets that would allow you to save your customization preferences.

 

Thanks for sharing!

hkingsbury
Rank
Userlevel 5
Badge +29

I know @Todd Davis​  has made some branding changes to our FME Server so that the Abley logo appears alongside the FME Server Logo.

This is what a Workspace App looks like with all default settings

image

Check out the Abley FME Firesides on Youtube: https://www.youtube.com/@ableyltd
F
Badge

Hi @fungergis​ ,

 

This is a great suggestion! At the moment I don't believe this is possible or on the roadmap but having the ability to preset the banner, header, and footer as a default configuration seems like it would be useful in ensuring apps look and feel consistent across your organization.

 

Would you be able to share this suggestion on the Ideas page? I can definitely see how it would be a time-saver (for myself included) to have some sort of template that pre-populates the "Customize" parameters. Perhaps in the customize section, there could be a "Preset" option similar to how transformers have Presets that would allow you to save your customization preferences.

 

Thanks for sharing!

Hi @chrisatsafe​ 

 

Alright, just added it to the ideas page here.

Can you please vote for it?

 

Many Thanks!

Ferid

F
Badge

I know @Todd Davis​  has made some branding changes to our FME Server so that the Abley logo appears alongside the FME Server Logo.

This is what a Workspace App looks like with all default settings

image

Thanks @hkingsbury​! This looks promising.

 

Dear @Todd Davis​, maybe you can help me here :-)

I am currently struggling with adding a favicon + our logo to our fme-server template. My best bet so far was to replace the "Favicon.ico" and the "FME-logo.png" with our corporate ones here: FMEServer\\Utilities\\tomcat\\webapps\\fmeserver\\images. I even assigned the same name so my hope was these replaced resources get picked up by the code.

To be honest, I did not see any changes so far when I refreshed one of the testapps. I also had a look at the network and the sources in the browser window but they did not help either.

How did you manage to add your corporate logo to the FME server app header? Did you also change the coloring of the header?

 

Many thanks for any hint in advance :-)

Ferid

todd_davis
Rank
Userlevel 1
Badge +12

Thanks @hkingsbury​! This looks promising.

 

Dear @Todd Davis​, maybe you can help me here :-)

I am currently struggling with adding a favicon + our logo to our fme-server template. My best bet so far was to replace the "Favicon.ico" and the "FME-logo.png" with our corporate ones here: FMEServer\\Utilities\\tomcat\\webapps\\fmeserver\\images. I even assigned the same name so my hope was these replaced resources get picked up by the code.

To be honest, I did not see any changes so far when I refreshed one of the testapps. I also had a look at the network and the sources in the browser window but they did not help either.

How did you manage to add your corporate logo to the FME server app header? Did you also change the coloring of the header?

 

Many thanks for any hint in advance :-)

Ferid

Hi,

 

these are my notes:

 

To change the image on the front page, copy fme-logo.png in this folder (this was our logo renamed) and paste into C:\\Program Files\\FMEServer\\Utilities\\tomcat\\webapps\\fmeserver\\images

 

Change C:\\Program Files\\FMEServer\\Utilities\\tomcat\\webapps\\fmeserver\\styles\\safe-software-app-<buildno>.min from

topnavbar .navbar-header .brand-logo .topnav-logo{height:2em} to

.topnavbar .navbar-header .brand-logo .topnav-logo {

height: 0.85em; }

 

 

Now the above was specific to our logo (I also removed the css reference that I had from a few years ago, because I don’t think we need it anymore, but if that doesn’t work, look for the same details in the css), so you need to play around with yours to make it work in different environment (e.g login page, side bar, minimised side bar). I was just using a white images of our logo for simplicity. But all the details should be changeable in that js and associated css.

 

Also, as something seperate, all pages utilise this C:\\Program Files\\FMEServer\\Utilities\\tomcat\\webapps\\fmeserver\\WEB-INF\\inc\\head-section.jsp  and I previously added a chat bot to every page by putting JavaScript in there.

todd_davis
Rank
Userlevel 1
Badge +12

Thanks @hkingsbury​! This looks promising.

 

Dear @Todd Davis​, maybe you can help me here :-)

I am currently struggling with adding a favicon + our logo to our fme-server template. My best bet so far was to replace the "Favicon.ico" and the "FME-logo.png" with our corporate ones here: FMEServer\\Utilities\\tomcat\\webapps\\fmeserver\\images. I even assigned the same name so my hope was these replaced resources get picked up by the code.

To be honest, I did not see any changes so far when I refreshed one of the testapps. I also had a look at the network and the sources in the browser window but they did not help either.

How did you manage to add your corporate logo to the FME server app header? Did you also change the coloring of the header?

 

Many thanks for any hint in advance :-)

Ferid

Plus, you need to restart fme server from memory

F
Badge

Thanks @hkingsbury​! This looks promising.

 

Dear @Todd Davis​, maybe you can help me here :-)

I am currently struggling with adding a favicon + our logo to our fme-server template. My best bet so far was to replace the "Favicon.ico" and the "FME-logo.png" with our corporate ones here: FMEServer\\Utilities\\tomcat\\webapps\\fmeserver\\images. I even assigned the same name so my hope was these replaced resources get picked up by the code.

To be honest, I did not see any changes so far when I refreshed one of the testapps. I also had a look at the network and the sources in the browser window but they did not help either.

How did you manage to add your corporate logo to the FME server app header? Did you also change the coloring of the header?

 

Many thanks for any hint in advance :-)

Ferid

Hi @Todd Davis​, many thanks for your help here.

So in order that the changes take effect, I need to restart the FME server, right?

What do you mean with restarting the fme server from memory? Does it mean restarting all running FME server services (like the once in my screenshot below)?

 

image

F
Badge

Thanks @hkingsbury​! This looks promising.

 

Dear @Todd Davis​, maybe you can help me here :-)

I am currently struggling with adding a favicon + our logo to our fme-server template. My best bet so far was to replace the "Favicon.ico" and the "FME-logo.png" with our corporate ones here: FMEServer\\Utilities\\tomcat\\webapps\\fmeserver\\images. I even assigned the same name so my hope was these replaced resources get picked up by the code.

To be honest, I did not see any changes so far when I refreshed one of the testapps. I also had a look at the network and the sources in the browser window but they did not help either.

How did you manage to add your corporate logo to the FME server app header? Did you also change the coloring of the header?

 

Many thanks for any hint in advance :-)

Ferid

Ah sorry, I just cleared the cache - works!

 

Thanks again!

 

Did you also change color schemes e.g. regarding the header or footer?

chrisatsafe
Rank
Badge +2

Hi @chrisatsafe​ 

 

Alright, just added it to the ideas page here.

Can you please vote for it?

 

Many Thanks!

Ferid

Done! Great idea!

todd_davis
Rank
Userlevel 1
Badge +12

Thanks @hkingsbury​! This looks promising.

 

Dear @Todd Davis​, maybe you can help me here :-)

I am currently struggling with adding a favicon + our logo to our fme-server template. My best bet so far was to replace the "Favicon.ico" and the "FME-logo.png" with our corporate ones here: FMEServer\\Utilities\\tomcat\\webapps\\fmeserver\\images. I even assigned the same name so my hope was these replaced resources get picked up by the code.

To be honest, I did not see any changes so far when I refreshed one of the testapps. I also had a look at the network and the sources in the browser window but they did not help either.

How did you manage to add your corporate logo to the FME server app header? Did you also change the coloring of the header?

 

Many thanks for any hint in advance :-)

Ferid

I didn’t change the colours. But I think it will be in the css file in that same area to control it.

F
Badge

Thanks @hkingsbury​! This looks promising.

 

Dear @Todd Davis​, maybe you can help me here :-)

I am currently struggling with adding a favicon + our logo to our fme-server template. My best bet so far was to replace the "Favicon.ico" and the "FME-logo.png" with our corporate ones here: FMEServer\\Utilities\\tomcat\\webapps\\fmeserver\\images. I even assigned the same name so my hope was these replaced resources get picked up by the code.

To be honest, I did not see any changes so far when I refreshed one of the testapps. I also had a look at the network and the sources in the browser window but they did not help either.

How did you manage to add your corporate logo to the FME server app header? Did you also change the coloring of the header?

 

Many thanks for any hint in advance :-)

Ferid

I made it - and no, it is unfortunately not inside these css-files.

 

If you ever want to change the server app header background-color, you can do that here in an angular frontend js file:

...\\FMEServer\\Utilities\\tomcat\\webapps\\fmeserver\\dist\\angular-frontend\\main-es2015.<someLongAlphanumericNumber>.js

 

In there, navigate to:

(this.showFmeLogo=!0,this.backgroundStyle.height="70px",this.backgroundStyle.padding="15px 0px",this.backgroundStyle.backgroundColor=this.serverAppsService.styling.backgroundColor&&"#f5f6fa"!==this.serverAppsService.styling.backgroundColor?this.serverAppsService.styling.backgroundColor:"#202326")

 

The hex code "#202326" represents the dark background color a new workspace app gets assigned per default. Change this value to another color hex and save.

 

Thanks again for your help!

Reply


Community Stats

28,709
Posts
109,481
Replies
36,554
Members
Terms & ConditionsCookie settings
A product of
Safe Software respectfully acknowledges that we live, learn and work on the traditional and unceded territories of the Kwantlen, Katzie, and Semiahmoo First Nations.