Skip to Content
0

Fiori Launchpad Custom Tile Controller.js Path Issue

Jan 06, 2017 at 09:40 PM

273

avatar image
Former Member

Hello,

I made a custom tile that works fine when running the application locally. After deploying the application to our SAPUI5 ABAP repository and attempting to add the custom tile through our admin portal, the controller.js file is pointing to a cached location and throwing a 404 error. The tiles chip.xml file is registered and is obviously working because it gives me the option to select the tile type. The error I see in our launchpad looks like this:

Has anyone run into a similar issue where the controller.js file for a custom tile is attempting to load from a cached location instead of the appropriate repository?

I have tried several combinations to make the view.xml file point to the appropriate URL for the controller.js, but the launchpad continues to look for a cached copy. Please see the error highlighted below - any suggestions are appreciated:

The view.xml file is loading from the correct path:

The controller.js file should be loading from this path:

My folder structure looks like this:

Below is the coding for view.xml, controller.js, index.html, and chip.xml:

View.xml

<core:View xmlns="sap.m" xmlns:mc="sap.suite.ui.microchart" xmlns:core="sap.ui.core.mvc" controllerName="CustomTile.controller.CustomTile">
	<GenericTile header="My Team Status" subheader="Summary" size="M" frameType="OneByOne" press="onPress">
		<tileContent>
			<TileContent>
				<content>
					<mc:ComparisonMicroChart size="M" id="myChart">
						<mc:data>
							<mc:ComparisonMicroChartData title="P2 Incidents" value="3" color="Error"/>
							<mc:ComparisonMicroChartData title="Resolved Tickets" value="15" color="Good"/>
							<mc:ComparisonMicroChartData title="Open Tickets" value="75" color="Critical"/>
						</mc:data>
					</mc:ComparisonMicroChart>
				</content>
			</TileContent>
		</tileContent>
	</GenericTile>
</core:View>

Controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";
	/*global jQuery, hasher */


	return Controller.extend("CustomTile.controller.CustomTile", {


			// trigger to show the configuration UI if the tile is pressed in Admin mode
			onPress: function() {
				var oView = this.getView(),
					oViewData = oView.getViewData(),
					oModel = oView.getModel(),
					sTargetUrl = oModel.getProperty("/nav/navigation_target_url"),
					oTileApi = oViewData.chip;
				if (oTileApi.configurationUi.isEnabled()) {
					oTileApi.configurationUi.display();
				} else if (sTargetUrl) {
					if (sTargetUrl[0] === "#") {
						hasher.setHash(sTargetUrl);
					} else {
						window.open(sTargetUrl, "_blank");
					}
				}
			}
	});
});

index.html

<!DOCTYPE HTML>
<html>


	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta charset="UTF-8">


		<title>CustomTile</title>


		<script id="sap-ui-bootstrap"
			src="https://sapui5.hana.ondemand.com/sdk/resources/sap-ui-core.js"
			data-sap-ui-libs="sap.m"
			data-sap-ui-theme="sap_bluecrystal"
			data-sap-ui-compatVersion="edge"
			data-sap-ui-resourceroots='{"CustomTile": ""}'>
		</script>


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


		<script>
			sap.ui.getCore().attachInit(function() {
				new sap.m.Shell({
					app: new sap.ui.core.ComponentContainer({
						height : "100%",
						name : "CustomTile"
					})
				}).placeAt("content");
			});
		</script>
	</head>


	<body class="sapUiBody" id="content">
	</body>


</html>

chip.xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- Copyright (c) 2009-2014 SAP SE, All Rights Reserved -->
<chip xmlns="http://schemas.sap.com/sapui2/services/Chip/1">
	<implementation>
		<sapui5>
			<basePath>./</basePath>
			<viewName>view/CustomTile.view.xml</viewName>
		</sapui5>
	</implementation>
	<appearance>
		<title>My Tile</title>
		<description>Custom Tile</description>
	</appearance>
	<contracts>
		<consume id="configuration"/>
		<consume id="fullscreen"/>
		<consume id="navigation"/>
		<consume id="bag"/>
		<consume id="configurationUi"/>
		<consume id="preview"/>
		<consume id="refresh"/>
		<consume id="search"/>
		<consume id="url"/>
		<consume id="visible"/>
		<consume id="writeConfiguration"/>
	</contracts>
</chip>
pic1.jpg (12.5 kB)
pic2.jpg (7.8 kB)
pic3.jpg (8.4 kB)
pic4.jpg (21.5 kB)
pic5.jpg (9.3 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Best Answer
avatar image
Former Member Apr 20, 2017 at 08:04 PM
0

To answer the question - when deploying to the Fiori Launchpad you must remove the application name from the view and controller files. In my code on the original post you would replace the following:

Original View & Controller:
controllerName="CustomTile.controller.CustomTile"
Controller.extend("CustomTile.controller.CustomTile"

New View & Controller:
controllerName="controller.CustomTile"

Controller.extend("controller.CustomTile"

Share
10 |10000 characters needed characters left characters exceeded
Premnarayan Patidar
Jul 02 at 11:18 AM
0

Hi,

i am facing same issue but as you suggested here even after removing application name from the view and controller, it throws same error, could you help here in detail how did you resolved this?

Thanks, Prem

Share
10 |10000 characters needed characters left characters exceeded