cpe
Elite Observer

Custom icon for InlineEditItem

I want to set a custom icon for my InlineEditItem and need a little help!

Questions:

  • Where do I put my Icon file? In the fsm-resources folder? Or in the general resources folder?
  • Where do I need to reference the file, so that it gets bundled up in the *.fsm?

What I know and have:

  • I choose the Icon by giving the Path my getIconPath. Currently I am using a FS Icon here like so:
    return "media/view/translation/compare.png";
    I would change that to
    return "/icons/translation-section.png";
  • I tried with my file under fsm-resources and resources, but I do not think it makes its way into the *.fsm.
  • I am building my module via gradle.

I suspect I need to reference the resources in one of the build/config file, but I do not know which...

I also could not find a working example in our previous modules or the examples given by Crownpeak.

Please let me know, if parts of my setup / code would be helpful in answering my question!

4 Replies
bIT_sosswald
Returning Responder

Hi @cpe,

it depends a little bit on your setup.

With Gradle I did not have used special CC icons till now. But with maven I made it work like this.

For the use in ContentCreator (which I guess is what you want because you want an InlineEdit Icon) it is important that you deploy a WebApplication to ContentCreator! (In my case I did is as a global WebApp to be used o all projects on the server.)

The resulting modul-isolated.xml from your build process should include something like this. The last resource Element is important because here I define where the resources can be found.

<web-app scopes="GLOBAL">
	<name>yyyContentCreatorExtensions</name>
	<displayname>yyy ContentCreator extensions</displayname>
	<description>yyy ContentCreator extensions</description>
	<class>com.xx.yyy.firstspirit.cc.CCWebApp</class>
	<web-xml>web.xml</web-xml>
	<web-resources>
		<resource name="xx-yyy-firstspirit:webapp" version="0.5.0-SNAPSHOT">
			lib/yyy-firstspirit-ccwebapp-0.5.0-SNAPSHOT.jar
		</resource>
		<resource name="xx-yyy-firstspirit:module" version="0.5.0-SNAPSHOT">
			lib/yyy-firstspirit-module-0.5.0-SNAPSHOT.jar
		</resource>
		<resource name="xx-yyy-firstspirit:common" version="0.5.0-SNAPSHOT">
			lib/yyy-firstspirit-common-0.5.0-SNAPSHOT.jar
		</resource>
		<resource name="xx-yyy-firstspirit:contentvcreator-files" version="0.5.0-SNAPSHOT"
				  target="/yyy">yyy/
		</resource>
	</web-resources>
</web-app>

Inside of my fs-file it looks something like this

2023-10-18_09h58_52.png

The blurred out section in the middle of the path (directly in the root of my fsm-file) is the folder name where the icons are located named yyy in my module.xml.

The deployed WebApp on my local FirstSpirit looks like this. You can see that the icons have been deployed to the ContentCreator.

2023-10-18_10h01_08.png

Also be careful with whitespaces in the path / name of your Icons. I had some problems that the Icons have been showed blank in the CC when the filename included whitespaces.

 

Maybe you can find a Gradle example which at least includes WebApp resources (also when it it not icons) here: https://github.com/e-Spirit/firstspirit-module-gradle-plugin/tree/master/test-projects 

I hope this informations already helps you to solve your problem!

 

Greetings
Sandro

Hey @bIT_sosswald,

thanks! That helped me a lot! It pushed me into the right direction and with some try and error I got it!

The @WebResource part in my web app was the missing part. It now looks like this:

@WebAppComponent(
name = "XYZWebApp",
webXml = "web/web.xml",
webResources = {
@WebResource(
name = "icons",
path = "icons/",
targetPath = "/icons",
version = "0.0.1"
)
}
)

For some reason it also did not work until I gave a target path although the icons where deployed to the root of the webapp before.

That you always need to deploy the WebApp to test it... I already learned... The hard way on my first modul... 😉

Thanks again for your help!

Cheers
Connz

mbergmann
Crownpeak employee

Hi,

just a remark concerning the target path: I strongly recommend not using „generic“ path names like „icons“ because there is a chance that other modules (existing or ones added later) also use such generic names (what they shouldn’t of course when adhering to best practices…). That might result in conflicts. So icons of one module might get overwritten by others. That’s one of those problems that are hard to find…

The extreme version would be putting a file with a very generic name like „icon.png“ in the root level… 😉 

I always recommend to have a folder named like the module name (or at least something like it - to make it as unique as possible) at the upmost level.

Michael

Hey Michael,

wait, the resources are not in module folders by default!? Oh boy!

Thanks for the hint! Yes, a module-names root folder sounds like the way to go.

Hmm, this also opens the possibility to manipulate other modules on purpose...

Cheers
Connz

0 Kudos