Skip to Content

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

This tutorial shows: How to implement 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 app includes 615 icons – this is an actual state for date: 11.06.2018.

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 file format. So you have to set some configurations in manifest.json. Content of these two files are at the bottom of an article.

“sap.app”

"dataSources": {
        ...
	"items": {
		"uri": "model/items.json",
		"type": "JSON"
		},
	"icons": {
		"uri": "model/icons.json",
		"type": "JSON"
	}
}

“sap.ui5”

"models": {
	...
	"items": {
		"type": "sap.ui.model.json.JSONModel",
		"dataSource": "items"
	},
	"icons": {
		"type": "sap.ui.model.json.JSONModel",
		"dataSource": "icons"
	}
},

 

   2) Nextyou have to set these above json models in your init function in your app controller. 

onInit: function() {
	this._oViewModel = new JSONModel({
		selectedIcon: "",
		selectedCategoryId: ""
	});
	this.getView().setModel(this._oViewModel, "details");

	this._oIcons = this.getOwnerComponent().getModel("icons");
	this.getView().setModel(this._oIcons, "icons");

	this._oItems = this.getOwnerComponent().getModel("items");
	this.getView().setModel(this._oItems, "items");

	this.getView().addStyleClass("sapUiSizeCompact");
	this._oIcons.setSizeLimit(999);

	var oComponent = this.getOwnerComponent();
	this._oResourceBundle = oComponent.getModel("i18n").getResourceBundle();
},

3) Nowyou can create a main view of application – the list of category items. 

<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="{items>/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="{= ${items>icon} ? 'Accept' : 'Emphasized' }" text="{= ${items>icon} === '' ? ${i18n>iconSelectButtonTitle} : ${i18n>iconChangeButtonTitle} }"
											press="showIconSelectDialog"></Button>
										<Text text="{items>name}"/>
										<core:Icon src="{items>icon}" size="1.5em" tooltip="{items>icon}" visible="{= ${items>icon} === '' ? false : true }"/>
										<Button type="Reject" icon="sap-icon://decline" press="deleteIcon" tooltip="{i18n>iconDeleteTooltip}" visible="{= ${items>icon} ? true : false }"></Button>
										<Text/>
									</cells>
								</ColumnListItem>
							</items>
						</Table>
					</VBox>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

4) In the next stepcreate a fragment with the dialog containing a sorted list of icons with icon names and additional searching mode panel in dialog header. 

<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 : 'icons>/icons', sorter : { path : 'init_data>text', descending: false } }"
				selectionChange="onIconSelectionChange" mode="SingleSelect" includeItemInSelection="true">
				<items>
					<StandardListItem title="{icons>text}" icon="sap-icon://{icons>text}" 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>

5) Below there is the whole App.controller.js with all required functions for an IconSelectDialog.fragment.xml. 

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel",
	"sap/ui/model/Filter",
	"sap/m/MessageToast"
], function(Controller, JSONModel, Filter, MessageToast) {
	"use strict";
	return Controller.extend("icons.controller.App", {
		onInit: function() {
			this._oViewModel = new JSONModel({
				selectedIcon: "",
				selectedCategoryId: ""
			});
			this.getView().setModel(this._oViewModel, "details");
			var oComponent = this.getOwnerComponent();
			this._oResourceBundle = oComponent.getModel("i18n").getResourceBundle();

			this._oIcons = this.getOwnerComponent().getModel("icons");
			this.getView().setModel(this._oIcons, "icons");

			this._oItems = this.getOwnerComponent().getModel("items");
			this.getView().setModel(this._oItems, "items");

			this.getView().addStyleClass("sapUiSizeCompact");
			this._oIcons.setSizeLimit(999);
		},

		// 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("text", 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._oItems.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._oItems.setProperty("/items/" + categoryId + "/icon", "");
			MessageToast.show(this._oResourceBundle.getText("iconDeletedMessage"));
		}
	});
});

6) Here is the screenshot after the completed steps: 

items.json:

{
	"items": [
		{
		"name": "Flats",
		"icon": ""
	},
	{
		"name": "Hostels",
		"icon": "bed"
	},
	{
		"name": "Apartments",
		"icon": "capital-projects"
	},
	{
		"name": "Cars",
		"icon": "car-rental"
	},
	{
		"name": "Meetings",
		"icon": "family-care"
	},
	{
		"name": "Restaurants",
		"icon": ""
	},
	{
		"name": "Theaters",
		"icon": "theater"
	},
	{
		"name": "Mileage",
		"icon": ""
	},
	{
		"name": "Flights",
		"icon": ""
	},
	{
		"name": "Travels",
		"icon": "travel-itinerary"
	},
	{
		"name": "Customers",
		"icon": "customer"
	}
	]
}

icons.json:

{
	"icons": [{
		"text": "accidental-leave"
	}, {
		"text": "account"
	}, {
		"text": "wrench"
	}, {
		"text": "windows-doors"
	}, {
		"text": "washing-machine"
	}, {
		"text": "visits"
	}, {
		"text": "video"
	}, {
		"text": "temperature"
	}, {
		"text": "task"
	}, {
		"text": "synchronize"
	}, {
		"text": "settings"
	}, {
		"text": "search"
	}, {
		"text": "retail-store"
	}, {
		"text": "refresh"
	}, {
		"text": "product"
	}, {
		"text": "present"
	}, {
		"text": "ppt-attachment"
	}, {
		"text": "pool"
	}, {
		"text": "pie-chart"
	}, {
		"text": "picture"
	}, {
		"text": "photo-voltaic"
	}, {
		"text": "phone"
	}, {
		"text": "pending"
	}, {
		"text": "pdf-attachment"
	}, {
		"text": "past"
	}, {
		"text": "outgoing-call"
	}, {
		"text": "opportunity"
	}, {
		"text": "notes"
	}, {
		"text": "map"
	}, {
		"text": "log"
	}, {
		"text": "line-charts"
	}, {
		"text": "lightbulb"
	}, {
		"text": "leads"
	}, {
		"text": "lead"
	}, {
		"text": "laptop"
	}, {
		"text": "incoming-call"
	}, {
		"text": "inbox"
	}, {
		"text": "horizontal-bar-chart"
	}, {
		"text": "history"
	}, {
		"text": "heating-cooling"
	}, {
		"text": "gantt-bars"
	}, {
		"text": "future"
	}, {
		"text": "fridge"
	}, {
		"text": "fallback"
	}, {
		"text": "expense-report"
	}, {
		"text": "excel-attachment"
	}, {
		"text": "energy-saving-lightbulb"
	}, {
		"text": "employee"
	}, {
		"text": "email"
	}, {
		"text": "edit"
	}, {
		"text": "duplicate"
	}, {
		"text": "download"
	}, {
		"text": "doc-attachment"
	}, {
		"text": "dishwasher"
	}, {
		"text": "delete"
	}, {
		"text": "decline"
	}, {
		"text": "complete"
	}, {
		"text": "competitor"
	}, {
		"text": "collections-management"
	}, {
		"text": "chalkboard"
	}, {
		"text": "cart"
	}, {
		"text": "card"
	}, {
		"text": "camera"
	}, {
		"text": "calendar"
	}, {
		"text": "begin"
	}, {
		"text": "basket"
	}, {
		"text": "bar-chart"
	}, {
		"text": "attachment"
	}, {
		"text": "arrow-top"
	}, {
		"text": "arrow-right"
	}, {
		"text": "arrow-left"
	}, {
		"text": "arrow-bottom"
	}, {
		"text": "appointment"
	}, {
		"text": "alphabetical-order"
	}, {
		"text": "along-stacked-chart"
	}, {
		"text": "alert"
	}, {
		"text": "addresses"
	}, {
		"text": "address-book"
	}, {
		"text": "add-filter"
	}, {
		"text": "add-favorite"
	}, {
		"text": "add"
	}, {
		"text": "activities"
	}, {
		"text": "action"
	}, {
		"text": "hint"
	}, {
		"text": "group"
	}, {
		"text": "check-availability"
	}, {
		"text": "weather-proofing"
	}, {
		"text": "bed"
	}, {
		"text": "family-care"
	}, {
		"text": "favorite"
	}, {
		"text": "navigation-right-arrow"
	}, {
		"text": "navigation-left-arrow"
	}, {
		"text": "e-care"
	}, {
		"text": "less"
	}, {
		"text": "lateness"
	}, {
		"text": "lab"
	}, {
		"text": "internet-browser"
	}, {
		"text": "instance"
	}, {
		"text": "inspection"
	}, {
		"text": "image-viewer"
	}, {
		"text": "home"
	}, {
		"text": "grid"
	}, {
		"text": "goalseek"
	}, {
		"text": "general-leave-request"
	}, {
		"text": "create-leave-request"
	}, {
		"text": "flight"
	}, {
		"text": "filter"
	}, {
		"text": "favorite-list"
	}, {
		"text": "factory"
	}, {
		"text": "endoscopy"
	}, {
		"text": "employee-pane"
	}, {
		"text": "email-read"
	}, {
		"text": "electrocardiogram"
	}, {
		"text": "documents"
	}, {
		"text": "decision"
	}, {
		"text": "database"
	}, {
		"text": "customer-history"
	}, {
		"text": "customer"
	}, {
		"text": "credit-card"
	}, {
		"text": "create-entry-time"
	}, {
		"text": "contacts"
	}, {
		"text": "compare"
	}, {
		"text": "clinical-order"
	}, {
		"text": "chain-link"
	}, {
		"text": "pull-down"
	}, {
		"text": "cargo-train"
	}, {
		"text": "car-rental"
	}, {
		"text": "business-card"
	}, {
		"text": "bar-code"
	}, {
		"text": "folder-blank"
	}, {
		"text": "passenger-train"
	}, {
		"text": "world"
	}, {
		"text": "iphone"
	}, {
		"text": "ipad"
	}, {
		"text": "warning"
	}, {
		"text": "sort"
	}, {
		"text": "course-book"
	}, {
		"text": "course-program"
	}, {
		"text": "add-coursebook"
	}, {
		"text": "print"
	}, {
		"text": "save"
	}, {
		"text": "play"
	}, {
		"text": "pause"
	}, {
		"text": "record"
	}, {
		"text": "response"
	}, {
		"text": "pushpin-on"
	}, {
		"text": "pushpin-off"
	}, {
		"text": "unfavorite"
	}, {
		"text": "learning-assistant"
	}, {
		"text": "timesheet"
	}, {
		"text": "time-entry-request"
	}, {
		"text": "list"
	}, {
		"text": "action-settings"
	}, {
		"text": "share"
	}, {
		"text": "feed"
	}, {
		"text": "role"
	}, {
		"text": "flag"
	}, {
		"text": "post"
	}, {
		"text": "inspect"
	}, {
		"text": "inspect-down"
	}, {
		"text": "appointment-2"
	}, {
		"text": "target-group"
	}, {
		"text": "marketing-campaign"
	}, {
		"text": "notification"
	}, {
		"text": "comment"
	}, {
		"text": "shipping-status"
	}, {
		"text": "collaborate"
	}, {
		"text": "shortcut"
	}, {
		"text": "lead-outdated"
	}, {
		"text": "tools-opportunity"
	}, {
		"text": "permission"
	}, {
		"text": "supplier"
	}, {
		"text": "table-view"
	}, {
		"text": "table-chart"
	}, {
		"text": "switch-views"
	}, {
		"text": "e-learning"
	}, {
		"text": "manager"
	}, {
		"text": "switch-classes"
	}, {
		"text": "signature"
	}, {
		"text": "sales-order-item"
	}, {
		"text": "sales-order"
	}, {
		"text": "request"
	}, {
		"text": "receipt"
	}, {
		"text": "puzzle"
	}, {
		"text": "process"
	}, {
		"text": "private"
	}, {
		"text": "popup-window"
	}, {
		"text": "person-placeholder"
	}, {
		"text": "per-diem"
	}, {
		"text": "paper-plane"
	}, {
		"text": "overview-chart"
	}, {
		"text": "overlay"
	}, {
		"text": "org-chart"
	}, {
		"text": "number-sign"
	}, {
		"text": "notification-2"
	}, {
		"text": "meal"
	}, {
		"text": "order-status"
	}, {
		"text": "customer-order-entry"
	}, {
		"text": "performance"
	}, {
		"text": "menu"
	}, {
		"text": "employee-lookup"
	}, {
		"text": "education"
	}, {
		"text": "customer-briefing"
	}, {
		"text": "customer-and-contacts"
	}, {
		"text": "my-view"
	}, {
		"text": "accelerated"
	}, {
		"text": "to-be-reviewed"
	}, {
		"text": "warning2"
	}, {
		"text": "feeder-arrow"
	}, {
		"text": "quality-issue"
	}, {
		"text": "workflow-tasks"
	}, {
		"text": "create"
	}, {
		"text": "home-share"
	}, {
		"text": "globe"
	}, {
		"text": "tags"
	}, {
		"text": "work-history"
	}, {
		"text": "x-ray"
	}, {
		"text": "wounds-doc"
	}, {
		"text": "web-cam"
	}, {
		"text": "vertical-bar-chart"
	}, {
		"text": "upstacked-chart"
	}, {
		"text": "trip-report"
	}, {
		"text": "microphone"
	}, {
		"text": "tree"
	}, {
		"text": "toaster-up"
	}, {
		"text": "toaster-top"
	}, {
		"text": "toaster-down"
	}, {
		"text": "time-account"
	}, {
		"text": "theater"
	}, {
		"text": "taxi"
	}, {
		"text": "subway-train"
	}, {
		"text": "study-leave"
	}, {
		"text": "stethoscope"
	}, {
		"text": "step"
	}, {
		"text": "sonography"
	}, {
		"text": "soccor"
	}, {
		"text": "physical-activity"
	}, {
		"text": "pharmacy"
	}, {
		"text": "official-service"
	}, {
		"text": "offsite-work"
	}, {
		"text": "nutrition-activity"
	}, {
		"text": "newspaper"
	}, {
		"text": "map-2"
	}, {
		"text": "machine"
	}, {
		"text": "mri-scan"
	}, {
		"text": "end-user-experience-monitoring"
	}, {
		"text": "unwired"
	}, {
		"text": "retail-store-manager"
	}, {
		"text": "Netweaver-business-client"
	}, {
		"text": "electronic-medical-record"
	}, {
		"text": "eam-work-order"
	}, {
		"text": "customer-view"
	}, {
		"text": "crm-service-manager"
	}, {
		"text": "collections-insight"
	}, {
		"text": "clinical-tast-tracker"
	}, {
		"text": "citizen-connect"
	}, {
		"text": "bo-strategy-management"
	}, {
		"text": "business-objects-mobile"
	}, {
		"text": "business-objects-explorer"
	}, {
		"text": "business-objects-experience"
	}, {
		"text": "bbyd-dashboard"
	}, {
		"text": "sap-box"
	}, {
		"text": "manager-insight"
	}, {
		"text": "accounting-document-verification"
	}, {
		"text": "idea-wall"
	}, {
		"text": "Chart-Tree-Map"
	}, {
		"text": "cart-5"
	}, {
		"text": "cart-4"
	}, {
		"text": "wallet"
	}, {
		"text": "vehicle-repair"
	}, {
		"text": "upload"
	}, {
		"text": "unlocked"
	}, {
		"text": "umbrella"
	}, {
		"text": "travel-itinerary"
	}, {
		"text": "time-overtime"
	}, {
		"text": "thing-type"
	}, {
		"text": "technical-object"
	}, {
		"text": "tag"
	}, {
		"text": "syringe"
	}, {
		"text": "syntax"
	}, {
		"text": "suitcase"
	}, {
		"text": "simulate"
	}, {
		"text": "shield"
	}, {
		"text": "share-2"
	}, {
		"text": "sales-quote"
	}, {
		"text": "repost"
	}, {
		"text": "provision"
	}, {
		"text": "projector"
	}, {
		"text": "add-product"
	}, {
		"text": "pipeline-analysis"
	}, {
		"text": "add-photo"
	}, {
		"text": "palette"
	}, {
		"text": "nurse"
	}, {
		"text": "mileage"
	}, {
		"text": "meeting-room"
	}, {
		"text": "media-forward"
	}, {
		"text": "media-play"
	}, {
		"text": "media-pause"
	}, {
		"text": "media-reverse"
	}, {
		"text": "media-rewind"
	}, {
		"text": "measurement-document"
	}, {
		"text": "measuring-point"
	}, {
		"text": "measure"
	}, {
		"text": "map-3"
	}, {
		"text": "locked"
	}, {
		"text": "letter"
	}, {
		"text": "journey-arrive"
	}, {
		"text": "journey-change"
	}, {
		"text": "journey-depart"
	}, {
		"text": "it-system"
	}, {
		"text": "it-instance"
	}, {
		"text": "it-host"
	}, {
		"text": "iphone-2"
	}, {
		"text": "ipad-2"
	}, {
		"text": "inventory"
	}, {
		"text": "insurance-house"
	}, {
		"text": "insurance-life"
	}, {
		"text": "insurance-car"
	}, {
		"text": "initiative"
	}, {
		"text": "group-2"
	}, {
		"text": "goal"
	}, {
		"text": "functional-location"
	}, {
		"text": "full-screen"
	}, {
		"text": "form"
	}, {
		"text": "fob-watch"
	}, {
		"text": "blank-tag"
	}, {
		"text": "family-protection"
	}, {
		"text": "folder"
	}, {
		"text": "fax-machine"
	}, {
		"text": "example"
	}, {
		"text": "eraser"
	}, {
		"text": "employee-rejections"
	}, {
		"text": "drop-down-list"
	}, {
		"text": "draw-rectangle"
	}, {
		"text": "document"
	}, {
		"text": "doctor"
	}, {
		"text": "discussion-2"
	}, {
		"text": "discussion"
	}, {
		"text": "dimension"
	}, {
		"text": "customer-and-supplier"
	}, {
		"text": "crop"
	}, {
		"text": "add-contact"
	}, {
		"text": "compare-2"
	}, {
		"text": "color-fill"
	}, {
		"text": "collision"
	}, {
		"text": "curriculum"
	}, {
		"text": "chart-axis"
	}, {
		"text": "full-stacked-chart"
	}, {
		"text": "full-stacked-column-chart"
	}, {
		"text": "vertical-bar-chart-2"
	}, {
		"text": "horizontal-bar-chart-2"
	}, {
		"text": "horizontal-stacked-chart"
	}, {
		"text": "vertical-stacked-chart"
	}, {
		"text": "choropleth-chart"
	}, {
		"text": "geographic-bubble-chart"
	}, {
		"text": "multiple-radar-chart"
	}, {
		"text": "radar-chart"
	}, {
		"text": "crossed-line-chart"
	}, {
		"text": "multiple-line-chart"
	}, {
		"text": "multiple-bar-chart"
	}, {
		"text": "line-chart"
	}, {
		"text": "line-chart-dual-axis"
	}, {
		"text": "bubble-chart"
	}, {
		"text": "scatter-chart"
	}, {
		"text": "multiple-pie-chart"
	}, {
		"text": "column-chart-dual-axis"
	}, {
		"text": "tag-cloud-chart"
	}, {
		"text": "area-chart"
	}, {
		"text": "cause"
	}, {
		"text": "cart-3"
	}, {
		"text": "cart-2"
	}, {
		"text": "bus-public-transport"
	}, {
		"text": "burglary"
	}, {
		"text": "building"
	}, {
		"text": "border"
	}, {
		"text": "bookmark"
	}, {
		"text": "badge"
	}, {
		"text": "attachment-audio"
	}, {
		"text": "attachment-video"
	}, {
		"text": "attachment-html"
	}, {
		"text": "attachment-photo"
	}, {
		"text": "attachment-e-pub"
	}, {
		"text": "attachment-zip-file"
	}, {
		"text": "attachment-text-file"
	}, {
		"text": "add-equipment"
	}, {
		"text": "add-activity"
	}, {
		"text": "activity-individual"
	}, {
		"text": "add-activity-2"
	}, {
		"text": "activity-items"
	}, {
		"text": "activity-assigned-to-goal"
	}, {
		"text": "status-completed"
	}, {
		"text": "status-error"
	}, {
		"text": "status-inactive"
	}, {
		"text": "status-critical"
	}, {
		"text": "status-in-process"
	}, {
		"text": "blank-tag-2"
	}, {
		"text": "cart-full"
	}, {
		"text": "locate-me"
	}, {
		"text": "paging"
	}, {
		"text": "company-view"
	}, {
		"text": "document-text"
	}, {
		"text": "explorer"
	}, {
		"text": "personnel-view"
	}, {
		"text": "sorting-ranking"
	}, {
		"text": "drill-down"
	}, {
		"text": "drill-up"
	}, {
		"text": "vds-file"
	}, {
		"text": "sap-logo-shape"
	}, {
		"text": "folder-full"
	}, {
		"text": "system-exit"
	}, {
		"text": "system-exit-2"
	}, {
		"text": "close-command-field"
	}, {
		"text": "open-command-field"
	}, {
		"text": "sys-back"
	}, {
		"text": "sys-back-2"
	}, {
		"text": "sys-cancel"
	}, {
		"text": "sys-cancel-2"
	}, {
		"text": "open-folder"
	}, {
		"text": "sys-find-next"
	}, {
		"text": "sys-find"
	}, {
		"text": "sys-monitor"
	}, {
		"text": "sys-prev-page"
	}, {
		"text": "sys-first-page"
	}, {
		"text": "sys-next-page"
	}, {
		"text": "sys-last-page"
	}, {
		"text": "generate-shortcut"
	}, {
		"text": "create-session"
	}, {
		"text": "display-more"
	}, {
		"text": "enter-more"
	}, {
		"text": "zoom-in"
	}, {
		"text": "zoom-out"
	}, {
		"text": "header"
	}, {
		"text": "detail-view"
	}, {
		"text": "collapse"
	}, {
		"text": "expand"
	}, {
		"text": "positive"
	}, {
		"text": "negative"
	}, {
		"text": "display"
	}, {
		"text": "menu2"
	}, {
		"text": "redo"
	}, {
		"text": "undo"
	}, {
		"text": "navigation-up-arrow"
	}, {
		"text": "navigation-down-arrow"
	}, {
		"text": "down"
	}, {
		"text": "up"
	}, {
		"text": "shelf"
	}, {
		"text": "background"
	}, {
		"text": "resize"
	}, {
		"text": "move"
	}, {
		"text": "show"
	}, {
		"text": "hide"
	}, {
		"text": "nav-back"
	}, {
		"text": "error"
	}, {
		"text": "slim-arrow-right"
	}, {
		"text": "slim-arrow-left"
	}, {
		"text": "slim-arrow-down"
	}, {
		"text": "slim-arrow-up"
	}, {
		"text": "forward"
	}, {
		"text": "overflow"
	}, {
		"text": "value-help"
	}, {
		"text": "multi-select"
	}, {
		"text": "exit-full-screen"
	}, {
		"text": "sys-add"
	}, {
		"text": "sys-minus"
	}, {
		"text": "dropdown"
	}, {
		"text": "expand-group"
	}, {
		"text": "collapse-group"
	}, {
		"text": "payment-approval"
	}, {
		"text": "batch-payments"
	}, {
		"text": "arobase"
	}, {
		"text": "question-mark"
	}, {
		"text": "per-diem"
	}, {
		"text": "paid-leave"
	}, {
		"text": "pdf-reader"
	}, {
		"text": "my-sales-order"
	}, {
		"text": "loan"
	}, {
		"text": "waiver"
	}, {
		"text": "unpaid-leave"
	}, {
		"text": "customer-financial-fact-sheet"
	}, {
		"text": "crm-sales"
	}, {
		"text": "commission-check"
	}, {
		"text": "collections-insight"
	}, {
		"text": "capital-projects"
	}, {
		"text": "business-one"
	}, {
		"text": "travel-expense"
	}, {
		"text": "travel-expense-report"
	}, {
		"text": "travel-request"
	}, {
		"text": "sales-notification"
	}, {
		"text": "incident"
	}, {
		"text": "money-bills"
	}, {
		"text": "sales-document"
	}, {
		"text": "opportunities"
	}, {
		"text": "monitor-payments"
	}, {
		"text": "widgets"
	}, {
		"text": "sys-help-2"
	}, {
		"text": "sys-help"
	}, {
		"text": "accept"
	}, {
		"text": "activity-2"
	}, {
		"text": "approvals"
	}, {
		"text": "bbyd-active-sales"
	}, {
		"text": "business-by-design"
	}, {
		"text": "cart-approval"
	}, {
		"text": "employee-approvals"
	}, {
		"text": "hr-approval"
	}, {
		"text": "kpi-corporate-performance"
	}, {
		"text": "kpi-managing-my-area"
	}, {
		"text": "survey"
	}, {
		"text": "sys-enter"
	}, {
		"text": "sys-enter-2"
	}, {
		"text": "write-new"
	}, {
		"text": "write-new-document"
	}, {
		"text": "sound"
	}, {
		"text": "sound-loud"
	}, {
		"text": "sound-off"
	}, {
		"text": "source-code"
	}, {
		"text": "scissors"
	}, {
		"text": "screen-split-one"
	}, {
		"text": "screen-split-two"
	}, {
		"text": "screen-split-three"
	}, {
		"text": "activate"
	}, {
		"text": "add-document"
	}, {
		"text": "add-process"
	}, {
		"text": "arrow-down"
	}, {
		"text": "back-to-top"
	}, {
		"text": "bell"
	}, {
		"text": "bold-text"
	}, {
		"text": "broken-link"
	}, {
		"text": "bullet-text"
	}, {
		"text": "call"
	}, {
		"text": "cancel"
	}, {
		"text": "cancel-maintenance"
	}, {
		"text": "cancel-share"
	}, {
		"text": "chart-table-view"
	}, {
		"text": "checklist"
	}, {
		"text": "checklist-2"
	}, {
		"text": "checklist-item"
	}, {
		"text": "checklist-item-2"
	}, {
		"text": "chevron-phase"
	}, {
		"text": "chevron-phase-2"
	}, {
		"text": "circle-task"
	}, {
		"text": "circle-task-2"
	}, {
		"text": "clear-filter"
	}, {
		"text": "cloud"
	}, {
		"text": "co"
	}, {
		"text": "connected"
	}, {
		"text": "copy"
	}, {
		"text": "create-form"
	}, {
		"text": "customize"
	}, {
		"text": "date-time"
	}, {
		"text": "disconnected"
	}, {
		"text": "donut-chart"
	}, {
		"text": "download-from-cloud"
	}, {
		"text": "edit-outside"
	}, {
		"text": "headset"
	}, {
		"text": "heatmap-chart"
	}, {
		"text": "hello-world"
	}, {
		"text": "horizontal-bullet-chart"
	}, {
		"text": "horizontal-grip"
	}, {
		"text": "horizontal-waterfall-chart"
	}, {
		"text": "italic-text"
	}, {
		"text": "jam"
	}, {
		"text": "key"
	}, {
		"text": "key-user-settings"
	}, {
		"text": "line-chart-time-axis"
	}, {
		"text": "master-task-triangle"
	}, {
		"text": "master-task-triangle-2"
	}, {
		"text": "message-error"
	}, {
		"text": "message-information"
	}, {
		"text": "message-popup"
	}, {
		"text": "message-success"
	}, {
		"text": "message-warning"
	}, {
		"text": "microphone"
	}, {
		"text": "minimize"
	}, {
		"text": "mirrored-task-circle"
	}, {
		"text": "mirrored-task-circle-2"
	}, {
		"text": "multiselect-all"
	}, {
		"text": "multiselect-none"
	}, {
		"text": "numbered-text"
	}, {
		"text": "paste"
	}, {
		"text": "program-triangles"
	}, {
		"text": "program-triangles-2"
	}, {
		"text": "project-definition-triangle"
	}, {
		"text": "project-definition-triangle-2"
	}, {
		"text": "reset"
	}, {
		"text": "resize-corner"
	}, {
		"text": "resize-horizontal"
	}, {
		"text": "resize-vertical"
	}, {
		"text": "rhombus-milestone"
	}, {
		"text": "rhombus-milestone-2"
	}, {
		"text": "sap-ui5"
	}, {
		"text": "simple-payment"
	}, {
		"text": "sort-ascending"
	}, {
		"text": "sort-descending"
	}, {
		"text": "status-negative"
	}, {
		"text": "status-positive"
	}, {
		"text": "stop"
	}, {
		"text": "text-align-center"
	}, {
		"text": "text-align-justified"
	}, {
		"text": "text-align-left"
	}, {
		"text": "text-align-right"
	}, {
		"text": "text-formatting"
	}, {
		"text": "thumb-down"
	}, {
		"text": "thumb-up"
	}, {
		"text": "trend-down"
	}, {
		"text": "trend-up"
	}, {
		"text": "ui-notifications"
	}, {
		"text": "underline-text"
	}, {
		"text": "upload-to-cloud"
	}, {
		"text": "user-edit"
	}, {
		"text": "user-settings"
	}, {
		"text": "vertical-bullet-chart"
	}, {
		"text": "vertical-grip"
	}, {
		"text": "vertical-waterfall-chart"
	}, {
		"text": "cursor-arrow"
	}, {
		"text": "developer-settings"
	}]
}
To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply