Developer Discussions

[Janesch.Wolfgang]

Hi!

Any known tricks to get an image in the label of a FormGroup?

I tried a img-Tag but this is displayed as text and not as an image.

regards

Wolfgang

[rhobsch]

HI Wolfgang,

you can use a JQery function to set a individal style attribute to the specific legend div object.See the following example:

$('#yourGroupName').find('.ig-group-legend').css('background-image','url("http://www.intergraph.com/global/eu/images/Hexagon_SI_RGB_STANDARD_Small.jpg")')

If you only want to adjust the image to the small label placeholder, you must use  .ig-group-label  instead the .ig-group-legend class

Regards

Robert

[Janesch.Wolfgang]

Problem is I would need the image within the text.

Something like:

"click on [Image] to...."

regards

Wolfgang

[jhettler]

Hi Wolfgang, 

what about something like ...

IG.vent.on('form:ready', function () {

	setIconToGroupLabel = function(groupLabelId, delimiterString, iconUrl) {
		var fPart;
		var lPart;
		var lPartHtml;

		/*Label in our case is sentence "Seznam MZCHÚ ve správě" - 
		"I chose the word MZCHÚ as delimiter for a place where you want to put your image or whatever you need"
		My idea is you can put in your group label some set of special symbols which are replaced by an image.
		And this expects just one image in label.
		*/
		
		var groupLabelName = groupLabelId; //"#GP_FA2111_Group_ChangesMZCHU_label"
		var delimiter = delimiterString; //"MZCHÚ"
		//iconUrl = "https://cdn1.iconfinder.com/data/icons/toolbar-signs/512/OK-512.png"
		var origHtmlElement = $(groupLabelName);

		fPart = origHtmlElement.html().split(delimiter)[0];
		lPart = origHtmlElement.html().split(delimiter)[1];

		lPartHtml = origHtmlElement.html(lPart).prop("outerHTML");

		$(groupLabelName).html(fPart);

		$("<img src=\""+iconUrl+"\" alt=\"Your Icon Name\" height=\"16\" width=\"16\"/>").appendTo(groupLabelName);

		$($(lPartHtml).prop("outerHTML")).appendTo(groupLabelName);
	};

	//call of the function
	setIconToGroupLabel("#GP_FA2111_Group_ChangesMZCHU_label","MZCHÚ","https://cdn1.iconfinder.com/data/icons/toolbar-signs/512/OK-512.png");

});

 

Hope this helps.

Regards,

Jakub

[Janesch.Wolfgang]

I'll try as soon as I find 5 imnutes spare time :-)

thanks

Wolfgang