Sap Icons Explorer in Your Application

[Former Member]

Hello, I am a new SapUI5 developer and I'm going to share my first blog post.

This tutorial shows: How to set your own sap icon explorer in your application.

The application shows us a list of some items (here - list of some categories) and it allows us to set a specific icon for the selected category. You can also change the previously mounted icon or delete it from the one category. The list includes always the actual state of all available sap icons.

Required steps 

0) Select SAPUI5 Application during creating a new project and ensure that you have got these files in your project.



1) Icons and category items are collected in JSON format. Below you can see content of onInit() function in the App.controller.js:

onInit: function() {

			this._oViewModel = new JSONModel({

				selectedIcon: "",

				selectedCategoryId: "",

				allIcons: [],

				items: [{

					"id": 1,

					"name": "Flats",

					"icon": ""

				}, {

					"id": 2,

					"name": "Hostels",

					"icon": "bed"

				}, {

					"id": 3,

					"name": "Apartments",

					"icon": "capital-projects"

				}, {

					"id": 4,

					"name": "Cars",

					"icon": "car-rental"

				}, {

					"id": 5,

					"name": "Meetings",

					"icon": "family-care"

				}, {

					"id": 6,

					"name": "Restaurants",

					"icon": ""

				}, {

					"id": 7,

					"name": "Theaters",

					"icon": "theater"

				}, {

					"id": 8,

					"name": "Mileage",

					"icon": ""

				}, {

					"id": 9,

					"name": "Flights",

					"icon": ""

				}, {

					"id": 10,

					"name": "Travels",

					"icon": "travel-itinerary"

				}, {

					"id": 11,

					"name": "Customers",

					"icon": "customer"

				}]

			});

			this.getView().setModel(this._oViewModel, "details");

			var oComponent = this.getOwnerComponent();

			this._oResourceBundle = oComponent.getModel("i18n").getResourceBundle();



			this.getView().addStyleClass("sapUiSizeCompact");

			this._oViewModel.setSizeLimit(999);



			this.loadAllIconsIntoJson();

		},

 

In '/items' property we store all category items.

[IMPORTANT LINE]

this._oViewModel.setSizeLimit(999);

This above method sets on the main oViewModel , Size Limit to the 999 value. It's because in this model we will store all sap icons which amount is about 650. So this limit have to be changed because as a default, its state is 100.

 

   2) Next, you have to write small function to convert icons array from Sap IconPool to json format which is more comfortable to show icons in the application view.

loadAllIconsIntoJson: function() {

			var tempArray = [];

			for (var i = 0; i < IconPool.getIconNames().length; i++) {

				tempArray.push({

					iconName: IconPool.getIconNames()[i]

				});

			}

			this._oViewModel.setProperty("/allIcons", tempArray);

		},

[DON'T FORGET ABOUT IMPORT ALL NEEDED LIBRARIES, SAP ICONPOOL ALSO]

sap.ui.define([

	"sap/ui/core/mvc/Controller",

	"sap/ui/model/json/JSONModel",

	"sap/ui/model/Filter",

	"sap/m/MessageToast",

	"sap/ui/core/IconPool"

]

 

3) Now, you can fill the content of the all needed files:

App.view.xml

<mvc:View controllerName="icons.controller.App" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"

	xmlns:core="sap.ui.core" displayBlock="true" xmlns="sap.m">

	<App>

		<pages>

			<Page title="{i18n>title}">

				<content>

					<VBox>

						<Table items="{details>/items}">

							<headerToolbar>

								<Toolbar>

									<core:Icon src="sap-icon://table-view" tooltip="sap-icon://table-view" size="1.5em"/>

									<Title text="{i18n>listHeaderTitle}" level="H1"/>

								</Toolbar>

							</headerToolbar>

							<columns>

								<Column hAlign="Center" width="120px">

									<Text/>

								</Column>

								<Column hAlign="Left" width="160px">

									<Text text="{i18n>itemNameColumnTitle}"/>

								</Column>

								<Column hAlign="Center" width="90px">

									<Text text="{i18n>itemIconColumnTitle}"/>

								</Column>

								<Column hAlign="Center" width="90px">

									<Text/>

								</Column>

								<Column></Column>

							</columns>

							<items>

								<ColumnListItem>

									<cells>

										<Button type="{= ${details>icon} ? 'Accept' : 'Emphasized' }" text="{= ${details>icon} === '' ? ${i18n>iconSelectButtonTitle} : ${i18n>iconChangeButtonTitle} }"

											press="showIconSelectDialog"></Button>

										<Text text="{details>name}"/>

										<core:Icon src="{details>icon}" size="1.5em" tooltip="{details>icon}" visible="{= ${details>icon} === '' ? false : true }"/>

										<Button type="Reject" icon="sap-icon://decline" press="deleteIcon" tooltip="{i18n>iconDeleteTooltip}" visible="{= ${details>icon} ? true : false }"></Button>

										<Text/>

									</cells>

								</ColumnListItem>

							</items>

						</Table>

					</VBox>

				</content>

			</Page>

		</pages>

	</App>

</mvc:View>

 

IconSelectDialog.fragment.xml

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:f="sap.ui.layout.form" xmlns:l="sap.ui.layout"

	xmlns:u="sap.ui.unified">

	<Dialog contentWidth="500px" contentHeight="500px" title="{i18n>iconsSelectDialogTitle}">

		<subHeader>

			<Toolbar>

				<SearchField liveChange="onIconSearch" width="100%"/>

			</Toolbar>

		</subHeader>

		<content>

			<List id="idList" items="{ path : 'details>/allIcons', sorter : { path : 'iconName', descending: false } }"

				selectionChange="onIconSelectionChange" mode="SingleSelect" includeItemInSelection="true">

				<items>

					<StandardListItem title="{details>iconName}" icon="sap-icon://{details>iconName}" iconDensityAware="false"/>

				</items>

			</List>

		</content>

		<beginButton>

			<Button text="{i18n>selectButtonText}" press="onSetIcon" enabled="{= ${details>/selectedIcon} ? true : false }"/>

		</beginButton>

		<endButton>

			<Button text="{i18n>closeButtonText}" press="onCloseIconSelectDialog"/>

		</endButton>

	</Dialog>

</core:FragmentDefinition>

 

and the rest of App.controller.js

sap.ui.define([

	.. libraries ..

], function(Controller, JSONModel, Filter, MessageToast, IconPool) {

	"use strict";

	return Controller.extend("icons.controller.App", {

		onInit: function() {

			this._oViewModel = new JSONModel({

				selectedIcon: "",

				selectedCategoryId: "",

				allIcons: [],

				items: [.. category items ..]

			});

			this.getView().setModel(this._oViewModel, "details");

			var oComponent = this.getOwnerComponent();

			this._oResourceBundle = oComponent.getModel("i18n").getResourceBundle();



			this.getView().addStyleClass("sapUiSizeCompact");

			this._oViewModel.setSizeLimit(999);



			this.loadAllIconsIntoJson();

		},



		// convert icons array to json format in the model

		loadAllIconsIntoJson: function() {

			var tempArray = [];

			for (var i = 0; i < IconPool.getIconNames().length; i++) {

				tempArray.push({

					iconName: IconPool.getIconNames()[i]

				});

			}

			this._oViewModel.setProperty("/allIcons", tempArray);

		},



		// open "select icon" fragment dialog

		showIconSelectDialog: function(oEvent) {

			var temp = oEvent.getSource().getParent().getId().split("-");

			this._oViewModel.setProperty("/selectedCategoryId", temp[temp.length - 1]);



			if (!this._oIconSelectDialogDialog) {

				this._oIconSelectDialogDialog = sap.ui.xmlfragment("icons.fragment.IconSelectDialog", this);

				this.getView().addDependent(this._oIconSelectDialogDialog);

				this._oIconSelectDialogDialog.open();

			}

		},



		// dynamic searching among the all icons

		onIconSearch: function(oEvt) {

			var aFilters = [];

			var sQuery = oEvt.getSource().getValue();

			if (sQuery && sQuery.length > 0) {

				var filter = new Filter("iconName", sap.ui.model.FilterOperator.Contains, sQuery);

				aFilters.push(filter);

			}

			var list = sap.ui.getCore().byId("idList");

			var binding = list.getBinding("items");

			binding.filter(aFilters, "Application");

		},



		// if user clicks on the bar with icon name and its graphics icon, it will be set to model property - "selectedIcon"

		onIconSelectionChange: function(oEvt) {

			var selectedIcon = oEvt.getParameter("listItem").getProperty("icon");

			this._oViewModel.setProperty("/selectedIcon", selectedIcon);

		},



		// run if user clicks the "Select" button on the bottom bar of the dialog

		onSetIcon: function() {

			var icon = this._oViewModel.getProperty("/selectedIcon");

			var categoryId = this._oViewModel.getProperty("/selectedCategoryId");

			this._oViewModel.setProperty("/items/" + categoryId + "/icon", icon);

			this._oViewModel.setProperty("/selectedIcon", "");

			this._oIconSelectDialogDialog.close();

			this._oIconSelectDialogDialog.destroy();

			this._oIconSelectDialogDialog = null;

			MessageToast.show(this._oResourceBundle.getText("iconSelectedMessage"));

		},



		// run if user clicks the "Close" button on the bottom bar of the dialog

		onCloseIconSelectDialog: function() {

			this._oViewModel.setProperty("/selectedIcon", "");

			this._oIconSelectDialogDialog.close();

			this._oIconSelectDialogDialog.destroy();

			this._oIconSelectDialogDialog = null;

		},



		deleteIcon: function(oEvent) {

			var temp = oEvent.getSource().getParent().getId().split("-");

			var categoryId = temp[temp.length - 1];

			this._oViewModel.setProperty("/items/" + categoryId + "/icon", "");

			MessageToast.show(this._oResourceBundle.getText("iconDeletedMessage"));

		}

	});

});

 

4) Here is the screenshot after the completed steps: