Solved - Custom icons for Form & Ref attribute headers

Rennur

Using the 'Advanced Properties' and CSS you can specify you own icon for any header for Forms, 'Table of Items' ref attributes etc

I'm in a rush so will post the steps on how to do it in a few hours.

Involves the function:

config.iconCls = "invoice-header-icon";

Where invoice-header-icon is a custom CSS class with your icon set ups as a background.

Simple enough!

Cheers

Powerm

Thanks for the tip. Where should we put the custom css ?

Rennur

Create a CSS file like icons.css and add a link to the file in Startup.html

<link rel="stylesheet" type="text/css" href="myicons.css">

Create css classes like eg:

/* **** FORM HEADERS **** */
.icon-form-objectname { background-image:url(/images/myicons/myicon1.png) !important;
}

/* **** REF ATTRIBUTE HEADERS **** */
.icon-objectname-attributename{ background-image:url(/images/myicons/myicon2.png) !important;
}

/* **** QUERY HEADERS **** */
.icon-objectname-queryname { background-image:url(/images/myicons/myicon3.png) !important;
}

!important tag is required for every class.

Cheers

nlarson

Good stuff!

hpl123

Great stuff Rennur 🙂.

When it comes to the steps outlined here, are they the full steps to get this working?
Also, if the steps are followed to the letter and the css file link is placed in the startup.html, this would mean the icons are available for all themes but you have to place a link in a form to get it displayed?

Thanks

hpl123

Support, it is great that this functionality exists but it would be a lot easier to be able to do this directly from forms, queries etc.
Thanks

Rennur

When it comes to the steps outlined here, are they the full steps to get this working?

Yes, keep a copy of any/all your custom .css, icons, .js and image files separate of AwareIm as it gets deleted when you install an update. This includes a copy of Startup.html, themes.props, theme files you have manually changed etc.

If the steps are followed to the letter and the css file link is placed in the startup.html, this would mean the icons are available for all themes but you have to place a link in a form to get it displayed?

Yes, the icons will be available for all themes. Just use the function in the 'Advanced' button.

Cheers

Powerm

hpl123 wrote
Support, it is great that this functionality exists but it would be a lot easier to be able to do this directly from forms, queries etc.
Thanks

I agree, I don't use many if these nice tweaks because they will be "lost" at updates. Not nice if your client has to do it himself.
Would be good to have as AwareIM feature.

hpl123

Rennur wrote
When it comes to the steps outlined here, are they the full steps to get this working?

Yes, keep a copy of any/all your custom .css, icons, .js and image files separate of AwareIm as it gets deleted when you install an update. This includes a copy of Startup.html, themes.props, theme files you have manually changed etc.

If the steps are followed to the letter and the css file link is placed in the startup.html, this would mean the icons are available for all themes but you have to place a link in a form to get it displayed?

Yes, the icons will be available for all themes. Just use the function in the 'Advanced' button.

Cheers

Thanks

hpl123

If you don´t want to use an icon (left side of header) at all but still want to use the rest of the commands in the header (right side of header) you can instead use this code:
config.iconCls = null;

Aware2014

hp123 - where do you find out those settings (e.g config.iconCIs)? Are they documented somewhere?

hpl123

Aware2014,
No unfortunately not. There has been a discussion going in the forums over the last couple of months about this exact question. I try to search the web for all kinds of things, resources (ext js etc. All things beneficial for Aware IM developers) but that is not an easy task 🙂. I have created v1 of a developer network system (DevNet) with features like e.g knowledgebase to among other things try to gather as much useful information for us developers as possible. Check it out at: http://www.awareim-devnet.com/ (still in the early stages but it will hopefully grow over time) and also please share your finding in the forums or DevNet if you find resources we all can use. Thanks

PS: I can´t remember the exact posts where these discussions are/where but in some of the posts Awaresoft also joined the discussion about how to / where to find resources (but if i remember correctly they didn´t write about specific resources, it was more thoughts in general).

Aware2014

Cheers hpl123 - will join dev-net