How to put legend in case of sap.m.table based on diffrent colors

[former_member338801]

Hi Experts,

I have to add legend for information present in the table. For example green color text says some reason 1, yellow color says some reason2 etc.. Where can I put something to show the reasons of the colors visible in the cell.

I could see class sap.viz.ui5.types.Legend has been already deprecated. Any simple way to show in the footer or on the header side of the table.

[former_member338801]

Looks like attached screenshot.

legend-example.png

[smarchesini · Accepted solution]

Hi ram.mishra ,

this is my code for a legend with multiple page and more than one color :

		/******************************************************
		 * LEGEND
		 * 
		 * ***************************************************/


		openLegend: function (oEvent) {
			if (!this._pressPopoverLegend) {
				var fragmentId = this.getView().createId("fragmentLegend");
				this._pressPopoverLegend = sap.ui.xmlfragment(fragmentId, "DashboardResource.fragment.PopoverLegend", this);
				this._pressPopoverLegend.addContent(this._createLegendContainer());
			}


			this._pressPopoverLegend.openBy(oEvent.getSource());


		},


		/**
		 * Create Legend Container
		 *
		 * @return {object}
		 * 			oLegendContainer:sap.gantt.legend.LegendContainer
		 * @private
		 */
		_createLegendContainer: function () {
			var that = this;
			that.i18nBundle = that.getModel("i18n").getResourceBundle();


			var oLegendData = {
				elements: [
					{
						icon: "sap-icon://status-positive",
						color: '#2b7d2b',
						title: that.i18nBundle.getText("POSITIVE"),
						tooltip: that.i18nBundle.getText("TOOLTIP_POSITIVE")
					}, {
						icon: "sap-icon://status-critical",
						color: '#e78c07',
						title: that.i18nBundle.getText("CRITICAL"),
						tooltip: that.i18nBundle.getText("TOOLTIP_CRITICAL")
					}
				]
			};


			//first section
			var oListLegendPage = new sap.m.Page({
				title: that.i18nBundle.getText("severity"),
				content: new sap.m.List({
					showSeparators: "None",
					items: {
						path: "legend>/elements",
						template: new sap.m.CustomListItem({
							content: [
								new sap.ui.core.Icon({
									src: "{legend>icon}",
									alt: "{legend>tooltip}",
									tooltip: "{legend>tooltip}",
									color: "{legend>color}"
								}).addStyleClass("sapUiSmallMarginBegin").addStyleClass("sapUiTinyMarginTop"),
								new sap.m.Label({
									text: "{legend>title}",
									wrapping: true
								}).addStyleClass("sapUiSmallMarginBegin").addStyleClass("sapUiTinyMarginTop")
							]
						})
					}
				}).setModel(new JSONModel(oLegendData), "legend")
			});


			var oLegendContainer = new sap.gantt.legend.LegendContainer({
				// width: "240px",
				width: "300px",
				height: "300px",
				legendSections: [oListLegendPage]
			});


			this.oDimensionLegend = new DimensionLegend({
				// legendWidth: 15,
				legendWidth: 15,
				legendHeight: 15,
				fontSize: 15,
				shape: new Shape({
					shapeClassName: "sap.s4ppm.gantt.shape.ShapeForLegend",
					shapeProperties: {
						// width: 15,
						width: 15,
						height: 15,


					}
				}),
				xDimension: "status",
				yDimension: "type",
				// xDomain: [0, 1],
				xDomain: [0],
				yDomain: [0, 1]
					//yDomain: [0, 1, 2, 3, 4]
			});


			//add second section
			oLegendContainer.addLegendSection(new sap.m.Page({
				title: that.i18nBundle.getText("ALLOCATION"),
				content: that.oDimensionLegend
			}));


			//add third section
			oLegendContainer.addLegendSection(new sap.m.Page({
				title: that.i18nBundle.getText("TOOLTIP_BUTTON_ALIGNS"),
				content: [
					new Button({
						icon: "sap-icon://BusinessSuiteInAppSymbols/icon-change-time-horizon"
					}).addStyleClass("sapUiTinyMargin"),
					new Text({
						text: that.i18nBundle.getText("LEGEND_ALIGN"),
						maxLines: 5
					}).addStyleClass("sapUiTinyMargin"),
					new sap.m.HBox({
						items: [
							new sap.m.CheckBox({
								selected: true
							}).addStyleClass("sapUiTinyMargin"),
							new Button({
								text: that.i18nBundle.getText("BUTTON_ALIGN_ALL"),
								type: "Emphasized",
								icon: "sap-icon://BusinessSuiteInAppSymbols/icon-change-time-horizon"
							}).addStyleClass("sapUiTinyMargin")
						]
					}),
					new Text({
						text: that.i18nBundle.getText("LEGEND_ALIGN_ALL"),
						maxLines: 5
					}).addStyleClass("sapUiTinyMargin"),
					new Text({
						text: that.i18nBundle.getText("LEGEND_SAVE"),
						maxLines: 5
					}).addStyleClass("sapUiTinyMargin")
				]
			}));


			//add fourth section
			oLegendContainer.addLegendSection(new sap.m.Page({
				title: that.i18nBundle.getText("TOOLTIP_BUTTON_LIMELIGHT"),
				content: [
					new Button({
						icon: "sap-icon://response"
					}).addStyleClass("sapUiTinyMargin"),
					new Text({
						text: that.i18nBundle.getText("LEGEND_LIMELIGHT"),
						maxLines: 7
					}).addStyleClass("sapUiTinyMargin"),
					new sap.m.HBox({
						items: [
							new sap.m.CheckBox({
								selected: true
							}).addStyleClass("sapUiTinyMargin"),
							new Button({
								text: that.i18nBundle.getText("BUTTON_LIMELIGHT_ALL"),
								type: "Emphasized",
								icon: "sap-icon://response"
							}).addStyleClass("sapUiTinyMargin")
						]
					}),
					new Text({
						text: that.i18nBundle.getText("LEGEND_LIMELIGHT_ALL"),
						maxLines: 7
					}).addStyleClass("sapUiTinyMargin"),
					new Text({
						text: that.i18nBundle.getText("LEGEND_SAVE"),
						maxLines: 5
					}).addStyleClass("sapUiTinyMargin")
				]
			}));


			return oLegendContainer;
		},

XML fragment :

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:gantt="sap.gantt.legend">
	<Popover showHeader="false" placement="Bottom"></Popover>
</core:FragmentDefinition>

And off course in the main page there is the button :

<Button type="Transparent" enabled="true" width="auto" tooltip="{i18n>ttlegend}" icon="sap-icon://legend" press="openLegend"/>

This is the result :

https://i.imgur.com/arjFqG5.gifv

😉
I hope it's usefull,
Sebastiano

[former_member338801 · Accepted solution]

Awesome!!

Nice, Thanks a lot!

[former_member656296]

Hello Raju,

Try sap.m.Table header toolbar with content of InfoLabel's (sap.tnt.InfoLabel).

Thanks,

Kumar

[former_member338801]

thanks Gautham

For Now I have used Icon and Text that gives close to that look but I don't know if we have any better option.

<core:Icon id="iconId" src="sap-icon://border" size="10px" color="black" backgroundColor="yellow" width="auto" height="auto"/>
     <Text class="legendText" id="legendId" text="Mention your text descripotion" textAlign="Left" width="40%"/>