Skip to Content
Author's profile photo Dilip Kumar Krishnadev Pandey

Create a Fiori app using Eclipse

Overview

  • SAP introduced an HTML5-based development toolkit, SAPUI5, which encourages one consistent user experience.
  • Apps built using SAPUI5 are responsive across browsers and devices – they run on smartphones, tablets, and desktops.
  • UI5 is a client UI technology based on JavaScript, CSS and HTML5.
  • Servers come into play for deploying your applications, storing the SAPUI5 libraries, and connecting to a database.
  • SAPUI5 supports the Model View Controller (MVC) concept.
    • Model: This is responsible for managing the application data in the database/backend.
    • View: This is responsible for defining the user interface to users. When a user sends a requests from his device, the view is responsible for data view as per the request submitted.
    • Controller: is used to control the data and view events as per user interaction by updating the view and model.
  • In this blog, we see, how we can create a UI5 application project and its contents.
  • This blog is part of below parent blog:

Pre-requisites

  • Eclipse having SAP UI5 Development Tool kit
    • For e.g. Eclipse Juno Service Release 2
    • To make it compatible with SAP UI5 App follow below steps:
      • Open Eclipse -> go to Menu item ‘Help’ -> ‘Install New Software’ -> type url
      • https://tools.hana.ondemand.com/juno
      • Select ‘UI Development Toolkit for HTML5’ -> install
    • Or refer below link:
      • https://tools.hana.ondemand.com/
  • SAP/Non-SAP’s data access medium
    • For e.g. In case of SAP, we require RFC
    • And in case of Non-SAP, web-service or other medium

Steps to create a UI5 application in Eclipse

In this SAP-UI5 application example, data is referred from a ‘JSON model file’

  1. Open Eclipse -> go to Menu ‘File’ -> select ‘New’ -> ‘other’
  2. In New Wizard pop-up, select ‘SAPUI5 Application Development’ -> ‘Application Project’ ->click on button ‘Next’
  3. Enter Project name -> select Target device as ‘Mobile’ -> select ‘create initial view’  its optional, it well create view on page -> click button ‘Next’
  4. Enter view name -> here select Development Paradigm as ‘Xml’
    • Here page view control will be defined in ‘Xml’
    • and its controller logic will be handled in JavaScript page
    • click button ‘Finish’ Button
  5. Once project gets created, we can see it in left panel explorer
  6. Here, we will re-structure created SAPUI5 project by adding few new folders/files/views under ‘WebContent’ as below,
    • When we run this UI5-App in Eclipse, its flow is as below:
      • ‘index.html’ -> ‘Component.js’ -> ‘App’ view -> ‘Master’ view -> ‘Details’ view
    • Post-deployment of this UI5-App in SAP-Fiori (Front-End) server, its flow is as below:
      • ‘Component.js’ -> ‘App’ view -> ‘Master’ view -> ‘Details’ view
    • Post creation of this UI5-App, we deploy all files/folders of ‘WebContent’ folder
  7. Details of SAPUI5 Application Project Structure:

    1. The WebContent folder contains all the folders, including Component-preload.js, Component.js, index.html, view, model, css, i18n etc..
    2. The CSS folder, which include customizing the sap ui5 application. Add any css files in this folder.
      • /* Make Text Bold */
        .Textbold{
        	font-weight: bold;
            font-size: small;
            color: red;
        }
    3. Next is the i18n folder, which is used for Globalization purpose. It includes i18n files for particular languages.
    4. model folder consists of the local data for testing ‘sampleData.json’ file.
      • {
          "listItems" : [
            {
              "title" : "Sales Reports",
              "MATNR" : "000000000000202031",
               "info" : "Overdue"  
            },
            {
              "title" : "Purchase Reports",
              "MATNR" : "000000000000202033",
              "info" : "Overdue",
              "infoState" : "Error"
            },
            {      
              "title" : "Financial Reports",
              "MATNR" : "000000000000202036",
              "info" : "4 day ago"
            }
          ]
        }
    5. view -> utils folder consists the ‘connectivity.js’ file, it is used to store OdataService path details.
      • var hostPort = "";
        
        // this setting is required to test app with odataService in Eclipse environment
        //hostPort	 = "proxy/http/<host>:<port>";
        
        //Odata Service Path
        var oDataPath = "/sap/opu/odata/sap/ZTEST_ODATA_SRV/";
        
        // Odata Service Url
        var serviceUrl= hostPort + oDataPath;
        
        
    6. Component-preload.js file is mainly used for optimization purpose.
    7. Index.html file serves the same purpose here, we declare the shell  here. And all the library files are loaded in index.html, it also calls ‘Component.js’
      • <!DOCTYPE HTML>
        <html>
        	<head>
        		<meta http-equiv="X-UA-Compatible" content="IE=edge">
        		<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
        		<script
        			id="sap-ui-bootstrap"
        			src="resources/sap-ui-core.js"
        			data-sap-ui-theme="sap_bluecrystal"
        			data-sap-ui-libs="sap.m, sap.ui.layout"
        			data-sap-ui-xx-bindingSyntax="complex"
        			data-sap-ui-resourceroots='{
        				"ZTEST_APP": "./"
        			}' >
        		</script>
                        
                        <!-- Calling Componet-name of Component.js of UI5 -->   
        		<script>
        			new sap.m.Shell({
        				app : new sap.ui.core.ComponentContainer({
        					name : "ZTEST_APP"
        				})
        			}).placeAt("content");
        		</script>
        	</head>
        	<body class="sapUiBody" id="content">
        	</body>	
        </html>
    8. Component.js file is used here for declaring the models, (odata, json, or i18n). Moreover, here the router initialization is also done.
      • jQuery.sap.declare("ZTEST_APP.Component");
        sap.ui.core.UIComponent.extend("ZTEST_APP.Component", {
        	
        	metadata : {
                stereotype 	: "component", 
                "abstract"	: true,  
                version 	: "1.0",   
                library 	: "ZTEST_APP", 	         //required for CSS reference
                includes	: [ "css/Styles.css" ],  //CSS style reference     
                dependencies: { 			 //external dependencies
                    libs 	: ["sap.m", 
                         	   "sap.ui.commons", 
                         	   "sap.ui.ux3", 
                         	   "sap.ui.table", 
                         	   "sap.ui.layout" ], 	//the libraries that component will be using            
                    library	: "sap.ui.core",	//what library belongs your component to              
                },        
        	},	
        	
        	createContent : function() {
        		// create root view
        		var oView = sap.ui.view({
        			id 		: "app",
        			viewName 	: "ZTEST_APP.view.App",
        			type 		: "JS",
        			viewData 	: { component : this }
        		});
        					
        		// set device model
        		var deviceModel = new sap.ui.model.json.JSONModel({
        			isPhone 	: jQuery.device.is.phone,
        			listMode 	: (jQuery.device.is.phone) ? "None" 	: "SingleSelectMaster",
        			listItemType: (jQuery.device.is.phone) ? "Active" 	: "Inactive"
        		});
        		deviceModel.setDefaultBindingMode("OneWay");
        		oView.setModel(deviceModel, "device");
        			
        		// done
        		return oView;
        	}
        });
      • As we can see, this Component.js file has created/referred App view in “createContent” function.
    9. The view folder, which the views, both xml & javascript files.
    10. Example:
      • In this UI5 App example, application will have a main page which includes two buttons and one list control.
      • On click of 1st button, list get filled with model/sapleData.json details
      • On click of 2nd button, navigation to 2nd page (Details)  is been done from 1st Main (Master) page
      • From 2nd page, back navigation to 1st page is also handled.
      • Following are the details of each page
    11. View ‘App’
      • Here ‘Development Paradigm‘ is JavaScript that means both view and controller are in javascript
      • View: ‘App.view.js’
      • Here, we can see in code, ‘Master’ view has been loaded & Empty page reference has been given.
      • sap.ui.jsview("ZTEST_APP.view.App", {
        
        	getControllerName: function () {
        		return "ZTEST_APP.view.App";
        	},
        	
        	createContent: function (oController) {
        		
        		// to avoid scroll bars on desktop the root view must be set to block display
        		this.setDisplayBlock(true);
        		
        		// create app
        		this.app = new sap.m.SplitApp();
        
        		// load the master page
        		var master = sap.ui.xmlview("Master", "ZTEST_APP.view.Master");
        		master.getController().nav = this.getController();
        		this.app.addPage(master, true);
        		
        		// load the empty page
        		var empty = sap.ui.xmlview("Empty", "ZTEST_APP.view.Empty");
        		this.app.addPage(empty, false);
        		
        		return this.app;
        	}
        });
      • Controller: ‘App.controller.js’
      • Here, two navigation functions are been defined,
        • to() function for Next page navigation
        • back() function is for back page navigation
      • sap.ui.controller("ZTEST_APP.view.App", {				
        		
        	/**
        	 * Navigates to another page
        	 * @param {string} pageId The id of the next page
        	 * @param {sap.ui.model.Context} context The data context to be applied to the next page (optional)
        	 */
        	to : function (pageId, context) {
        		
        		var app = this.getView().app;
        		
        		// load page on demand
        		var master = ("Master" === pageId);
        		if (app.getPage(pageId, master) === null) {
        			var page = sap.ui.view({
        				id 		: pageId,
        				viewName: "ZTEST_APP.view." + pageId,
        				type 	: "XML"
        			});
        			page.getController().nav = this;
        			app.addPage(page, master);
        			jQuery.sap.log.info("app controller > loaded page: " + pageId);
        		}
        		
        		// show the page
        		app.to(pageId);
        		
        		// set data context on the page
        		if (context) {
        			var page = app.getPage(pageId);
        			page.setBindingContext(context);
        		}
        	},
        	
        	/**
        	 * Navigates back to a previous page
        	 * @param {string} pageId The id of the next page
        	 */
        	back : function (pageId) {
        		this.getView().app.backToPage(pageId);
        	},
        	
        });
    12. View ‘Empty’
      • This is xml view, which will be used only in Desktop Mode to overlap ‘Details’ page while navigating back to ‘Master’ page
      • View: ‘Empty.view.xml
      • <core:View
        	xmlns="sap.m"
        	xmlns:core="sap.ui.core" >
        	<Page>		
        	<footer>
        			<Bar>
        			</Bar>
        	</footer>
        	</Page>
        </core:View>
    13. View ‘Master’
      • Here we create Two button and one List control
      • Button ‘GetMaterial’:  on click of this button fill List control with sampleData.json items
      • Button ‘NextPage’: on click of this button, navigate to ‘Details’ view
      • List control: where items will be filled on button ‘GetMaterial’ event
      • View: ‘Master.view.xml’
      • <core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
        	xmlns="sap.m" controllerName="ZTEST_APP.view.Master" xmlns:html="http://www.w3.org/1999/xhtml">
        	<Page title="App Example">
        		<content>
        			<Bar>
        				<contentLeft>
        					<Button text="GetMaterial" press="pressGetMaterial" type="Accept" />
        				</contentLeft>
        				<contentRight>
        					<Button text="NextPage" press="pressNextPage" type="Emphasized" />
        				</contentRight>
        			</Bar>
        			<List id="idList1" mode="{device>/listMode}" items="{/listItems}">
        				<StandardListItem title="{MATNR}" />
        			</List>
        		</content>
        		<footer>
        			<Bar>
        			</Bar>
        		</footer>
        	</Page>
        </core:View>
        
        
      • Controller: ‘Master.controller.js’
      • here we can see three functions:
        1. pressNextPage():  which will be invoked on press event of button ‘NextPage’, to navigate to “Details” view
        2. pressGetMaterial():  which will be invoked on press event of button ‘GetMaterial’, to fill list control with data
        3. call_MoldeFile(): which will be invoked from function pressGetMaterial(),  to read ‘sampleData.json’ file and fill fill list control with data
      • jQuery.sap.require("sap.m.MessageBox");	
        sap.ui.controller("ZTEST_APP.view.Master", {
        
        	pressNextPage: function(evt) {	
                        //Navigation to detail page
        		var context = evt.getSource().getBindingContext();
        		this.nav.to("Details", context);    //to() is defined in 'App.controller.js'
        	},
        
        	pressGetMaterial : function(evt) {
        		this.call_ModelFile();
        	},
        	
        	call_ModelFile: function(){		
        		
                        //Calling model json file for data reference
        		var sample = $.sap.getModulePath("ZTEST_APP", "/model/sampleData.json");
        		var oModel = new sap.ui.model.json.JSONModel(sample);
        		
        		//Set JSONModeloutput to ListControl
        		var list = this.getView().byId("idList1");
        		list.setModel(oModel);
        	}
        });
    14. View ‘Details’
      • Here Navigation is shown.
      • Back navigation button will take to 1st page, and in case of desktop mode, Center page gets overlapped with ‘Empty’ view
      • View: ‘Details.view.xml’
      • <core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
        	xmlns="sap.m" controllerName="ZTEST_APP.view.Details" xmlns:html="http://www.w3.org/1999/xhtml">
        	<Page title="Detail Page" showNavButton="true" navButtonPress="backPress">
        		<content>
        			<Label text="Welcome to Detail Page !!" design="Bold" />
        		</content>
        		<footer>
        			<Bar>
        			</Bar>
        		</footer>
        	</Page>
        </core:View>
      • Controller: ‘Details.controller.js’ 
      • This has on back navigation function event backPress(), which will be invoked on press button of ‘back’ icon in ‘Details’ page
      • sap.ui.controller("ZTEST_APP.view.Details", {
        
        	backPress : function (event) {
        		var context = event.getSource().getBindingContext();
        		if (!jQuery.device.is.phone){
        			this.nav.back("Empty", context);
        		}
        		this.nav.back("Master", context);
        	},
        
        
        });
  8. Testing of SAPUI5 app in Eclipse

    • To test UI5 application in eclipse, in left pane project -> select ‘index.html’ -> right click -> ‘Run As’ -> ‘Web App Preview ‘
    • Next ‘Index.html opened as below screen
    • Perform button event like ‘GetMaterial’ and ‘NextPage’ to see the results
  9. Thus we have created one UI5 application sample which is accessing data from model json file enclosed within project itself.

Assigned Tags

      44 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Murali Loganathan
      Murali Loganathan

      Dear Dilip

      Your series blogs are instrumental for beginners, very useful and informative.

      I habituated to develop UI using drag and drop in webdynpro Java and ABAP,  in fact it was developer friendly. I feel managing  MVC using the core code is a bit tough job now, are there any tools to develop UI5  apps using drag and drop features.

      Regards

      Murali

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      Dear  Murali Loganathan,

      Sorry for late reply...'Merry Christmas' !!

      In my information, no tool available with drag and drop features for UI5 App development.

       

      Thanks & Regards...

      Dilip Pandey

      Author's profile photo Naoto Amari
      Naoto Amari

      Hello! readind deeper i found your courses ! is any problem if i use eclipe oxygen ? it's ok if i create the folder utils in the same level as  model ???

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      Dear Naoto,

      Sorry for delayed response, I was too much busy in my current project….

      1. I have not used eclipe oxygen for Fiori App till now. I can only ensure you for eclipse-Juno/Mars/Neon which I've used while app development.
      2. You can create utils folder in same level as model, and then while referring in .js pages, please change respective paths too like as below:
        • jQuery.sap.require("FioriAppName.utils.connectivity");
        • instead of
        • jQuery.sap.require("FioriAppName.view.utils.connectivity")
      3. For 2nd point, I recommend you to follow view/utils only

       

      Thanks & Regards

      Dilip.

      Author's profile photo Former Member
      Former Member

       

      Hi Dilip, I have any problem with testing this app. - step 8

      HTTP ERROR 404

      Problem accessing /ZTEST_APP/WEB-INF/index.html. Reason:

          Not Found

      Can you help me?

      I am beginner with eclipse and FIORI, sorry...

      Thanks Tomas M.

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      Dear Tomas,

      Sorry for delayed response, I was too much busy in my current project....

      Please correct your Fiori App Project Structure, it should be like below:

      i.e. index.html never resides in WEB-IN

      Thanks & Regards

      Dilip...

      Author's profile photo Former Member
      Former Member

      Hi Dilip, many thanks for your answer. I corrected my project structure and working fine, but... I created, registered and activated OData service in SAP. I try tested with TCODE /n/iwfnd/gw_client and I think that is OK. But from Eclipse I see problem:

      Can you help me again? Problem with user and password? Thanks from Czech Rep. TomasM

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      Dear Former Member,

      While accessing from Eclipse, give below prefix , that will resolve Cross domain issue.

      • proxy/http/<host>:<port>/<ui5 path>
      • instead of current path

      But do not forget to remove prefix while uploading app in Fiori server.

      Thanks and Regards

      Dilip.

       

      Author's profile photo Former Member
      Former Member

      Hi Dilip, now is OK......................................................... Many thanks... TomasM

      Author's profile photo Nelson Kharat
      Nelson Kharat

      Hi Dilip,

      Very nice blog.

      I could not find the file Component-preload.js in the project and it is stating 400 error when debugged with F12.

      Please let me the know the code to be added into the file.

      Thanks,
      Nelson

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      Hi Nelson,

      Thanks for the comments.

      About " Component-preload.js ", this we basically to improve runtime performance and to modularize UI5 App's code/functions.

      As above was a basic test app example, so I haven't used it but kept it blank to avoid 404 (not found) error found during debug.

      Regarding same nice explanation can be found from below blog by Mr. HP Seitz

      • https://blogs.sap.com/2015/04/27/performance-improvement-with-component-preloadjs/

       

      Thanks & Regards,

      Dilip

      Author's profile photo pragyan pradeepta panigrahi
      pragyan pradeepta panigrahi

      Hi Dilip,

      can u find out where is the problem ???

       

       

       

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      Hi Pragyan,

      Root cause is project structure, please correct it.

      WEB-IF folder can not contain index.html and component files,

      Correct reference is as follows:

       

      Thanks & Regards,

      Dilip

      Author's profile photo pragyan pradeepta panigrahi
      pragyan pradeepta panigrahi

       

      Now it comes like this. I think still some error is there.

       

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      Hi Pragyan,

      Just re-check page's link references, which should be like below:

      index.html -> Component.js -> view.App -> view.Master

      index.html

      Component.js

      App.view.js

      Master.controller.js

       

      Thanks & Regards,

      Dilip

      Author's profile photo pragyan pradeepta panigrahi
      pragyan pradeepta panigrahi

      Hi Dilip, Thanks For your reply.

       

      I checked as per your reference link.But still i am uable to solve  the issue.

       

       

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      Hi Pragyan,

      Its sure that there is linkage issue in your app.

      Please use debugger to get the exact root cause, for same, run your app in 'G Chrome browser' -> press 'F12' -> in right panel in console tab exact linkage issue will appear.

       

      Thanks n Regards.

      Dilip

      Author's profile photo Dmitry Bez
      Dmitry Bez

      Hi Dilip,

      You are amazing!

      Can help me and find out where is the problem ???

      When i create project like you i miss some folders:

      • css
      • i18n
      • model

       

      Thank you a lot!

      Best Regards,

      D.

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      Hi Dmitry,

      Thanks for the comments about blog.

      What is the error you get ?

      Folder structure is not correct, you missed Components.js. Don't know if your 'exxx' (equivalent 'view' folder) has app -> Master page link.

      just please try to follow same strcture as given in blog. With you custom structure of default template, you may get working your app inside Eclipse, but when you deploy it in Fiori-Server, during access from FLP, you will get error.

       

      Thanks & Regards.

      Dilip

      Author's profile photo Dmitry Bez
      Dmitry Bez

      Hello Dilip,

      Thanks for so fast answer, it`s important for me.

      Seems problem is in the links https://tools.hana.ondemand.com/ or https://tools.hana.ondemand.com/juno. 

      When i try to install new software i have next error:

       

      Also when i try to create app in eclipse, in Error Log i see messages like:

      1.Unable to connect to repository https://tools.hana.ondemand.com/content.xml

      2.Connection to https://tools.hana.ondemand.com/p2.index failed on Connection refused.

       

      Thank you a lot!

      Best regards,

      Dmitry

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      Dear Dmitry,

      I can help you in case of Fiori-App issues.

      Sorry, but I do not have any input for Hana urls not working cases.

      However, https://tools.hana.ondemand.com/ is working from my browser.

       

      Regards,

      Dilip

      Author's profile photo Dmitry Bez
      Dmitry Bez

      You are very kind!

      Thank you for your time.

       

      I have some questions about Fiori-Apps. Would you give me your contact information(email)?

       

      Regards,

      Dmitry

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      Hi Dmitry,

      You can drop your questions here, I'll surly reply.

       

      Regards,

      Dilip

      Author's profile photo Dmitry Bez
      Dmitry Bez

      I need to create application where will be question form and 2 roles:

      1 role - Administrator
      2 role - User

      User should fill the question form. So these answers need to save somewhere, i think it will be HANA database.
      Administrator could read answers and "ADD NEW QUESTIONS"(main goal).

      I hope you understand an idea.
      So my questions are next:
      1) How to divide roles?
      2) Could i use HANA database for manipulating with dates or i need to use something else?

      Sorry if my understanding is incorrect, i`m newbie in that scope.

       

      Thank you a lot.

      Regards,

      Dmitry

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      Hi Dmitry,

      For your case you require
      1. oDataService for data interchange with database
      2. Fiori-App for user/Admin interaction
      Please note:
      To differentiate Admin/User in Fiori-App, either you can do:
      1. In same Fiori-App, Manage and get type for logged-in user via oDataService and accordingly hide/display pages
      2. Create two fiori-App, each for Admin and user and manage it via PFCG roles

      OData-Service should be handling following things:
      1. For USER: Reading all questions from database
      2. For USER: Writing all question’s user answers to the database
      3. For Admin: Adding new questions
      4. For Admin: Reading all questions answers user-wise in list manners.

      Fiori-App GUI should be like:
      1. Create one page having questions and input-Box for user to wirte answers via oDataServices
      2. Create page for admin to add questions, to view answers user-wise etc.

       

      One suggestion, if possible, plz start with sample app creation and sample oDataservice creation then go for this above requirement.

      For oDataServices too, you can refer my blogs

      SAP (Fiori) OData Service Examples

       

      Regards,

      Dilip

      Author's profile photo K patel
      K patel

      Now it comes like this. I think still some error is there.

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      Hi Kishan,

      If you see blank page, then its view linking error.

      please check linkage properly its like index -> component -> app.view -> master

      In chrome browser just press F12 to view exact error from that too, you will get some hint.

      Let me know further...

       

      thanks & regards,

      Dilip

       

      Author's profile photo K patel
      K patel

      Everything is ok but Warning is :An error occured when accessing the /META-INF/ui5.properties! Reason: The /META-INF/ui5.properties could not be found!

       

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      Hi,

      This file can be ignored.

      thanks & regards,

      Dilip

       

      Author's profile photo Hari P V
      Hari P V

      A tutorial on PO approval will be helpful.Thank you.

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      Hi Hari,

      PO/PR approval's (std. app) configuration is very simple, you should have a look on below blog:

      https://blogs.sap.com/2017/11/10/sap-fiori-app-implementation-standard-apps/

      Once you acquire component wise understanding, you will surly be able to config any std. app.

       

      Thanks & Regards,

      Dilip.

      Author's profile photo Hari P V
      Hari P V

      And workflow integration will be welcomed.Thanks.

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      Hi Hari,

      If its workflow configuration related to PO/PR release strategy, then we always take help of SAP-MM guys.

       

      Thanks/regards

      Dilip

      Author's profile photo Hari P V
      Hari P V

      Hi Dilip,

      I am new to Fiori started learning a month back i need to add another button(send back for verification) between accept and reject. Can such customization be possible by extending standard fiori app if so how to extend the standard fiori app?.Thank you for your time.

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      Hi Hari,

      Yes, enhancement of std. app too is possible, respectively there are other blogs and std. docs too available, please check.

      Till now, std.app extension requirement not yet came in my way.

       

      Thanks & Regards

      Dilip

       

       

      Author's profile photo Sanjit Roy Chowdhury
      Sanjit Roy Chowdhury

      Hi Dilip,

      I have a huge data dimension in my column chart and i will tried to enable scroll bar in this position horizontally..Its works fine in Web IDE,not in Eclipse..I want to work in Eclipse…..

      i have tried many times in Eclipse IDE,but i failed to do this..please help me to solve this issue…

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      Hi Sanjit,

      Atleast please share the error details from console 'F12' of browser of eclipse app and respective project's file structure created/imported into Eclipse.

      And to do hands on with eclipse, above blog will help you.

      Thanks & Regards,

      Dilip

      Author's profile photo Sanjit Roy Chowdhury
      Sanjit Roy Chowdhury
      <content>
                  <viz:Popover id="idPopOver"></viz:Popover>
                  <viz:VizFrame id="idVizFrame" visible="true" uiConfig="{applicationSet:'fiori'}"
                   height="78%" width="100%" vizType="column" selectData="onSelectMatGrp">
                      <viz:dataset>
                          <viz.data:FlattenedDataset data="{localModel>/results}">
                              <viz.data:dimensions>
                                  <viz.data:DimensionDefinition name="Plant Name" value="{localModel>WERKS_NM}" />
                                  <viz.data:DimensionDefinition name="Material Group" value="{localModel>EXTWG}" />
                                  <viz.data:DimensionDefinition name="Plant Code" value="{localModel>WERKS}" />
                              </viz.data:dimensions>
                              <viz.data:measures>
                                  <viz.data:MeasureDefinition name="Gross Production" value="{localModel>GROSS_PRD}" />
                                  <viz.data:MeasureDefinition name="Net Production" value="{localModel>NET_PRD}" />
                                  <viz.data:MeasureDefinition name="Capacity" value="{localModel>CAPACITY}" />
                                  <viz.data:MeasureDefinition name="Last Month Gross" value="{localModel>LM_GROSS_PRD}" />
                                  <viz.data:MeasureDefinition name="Last Month Net" value="{localModel>LM_NET_PRD}" />
                              </viz.data:measures>
                          </viz.data:FlattenedDataset>
                      </viz:dataset>
      
                      <viz:feeds>
                          <viz.feeds:FeedItem uid="valueAxis" id="feedActualGPValues" type="Measure" values="Gross Production" />
                          <viz.feeds:FeedItem uid="valueAxis" id="feedActualNPValues" type="Measure" values="Net Production" />
                          <viz.feeds:FeedItem uid="valueAxis" id="feedActualCPValues" type="Measure" values="Capacity" />
                          <viz.feeds:FeedItem uid="valueAxis" id="feedActualLMGValues" type="Measure" values="Last Month Gross" />
                          <viz.feeds:FeedItem uid="valueAxis" id="feedActualLMNValues" type="Measure" values="Last Month Net" />
                          <viz.feeds:FeedItem uid="categoryAxis" isScrollable="true" id="feedCategoryAxis" type="Dimension" values="Plant Name,Material Group,Plant Code" />
                      </viz:feeds>
                  </viz:VizFrame> 
                  </content>

      This is my code sample and output screenshots……

      I want that the chart should be responsive….when i create that same properties of chart in web IDE,the chart should be responsive properly...Here is the screenshot...

      Please help to solve this issue….

      Author's profile photo Sanjit Roy Chowdhury
      Sanjit Roy Chowdhury

      Hi Dilip,

       

      Is there is a version problem??? Please help me to solve this issue.....

       

      Thanks & Regards,

      Sanjit

       

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      Hi Sanjit,

      Yes, it seems to be version problem. I too have tried your code at my end, its showing error like below:

      1. UIComponent.js:6 Uncaught Error: failed to load 'sap/viz/ui5/data/flatteneddataset/FlattenedDataset.js' from resources/sap/viz/ui5/data/flatteneddataset/FlattenedDataset.js: 404 - Resource could not be found!
      2. Uncaught Error: failed to load 'sap/viz/ui5/controls/common/feeds/feeditem/FeedItem.js' from resources/sap/viz/ui5/controls/common/feeds/feeditem/FeedItem.js: 404 - Resource could not be found!

      Try to download and use new version UI5 libraries in Eclipse.

      For Your reference, I have tried yr code with lib references as below:

      	
      <core:View 
      	controllerName="ZTEST_APP.view.Master"
      	xmlns:html="http://www.w3.org/1999/xhtml"	
      	xmlns:core="sap.ui.core" 
      	xmlns:mvc="sap.ui.core.mvc"
      	xmlns="sap.m"
      	xmlns:l="sap.ui.layout" 	
      	xmlns:viz="sap.viz.ui5.controls"
      	xmlns:viz.data="sap.viz.ui5.data.flatteneddataset" 
      	xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds.feeditem"
      	>
      	
      	<Page title="{i18n>PgMst_Title}">
      		<content>		
       		<viz:Popover id="idPopOver"></viz:Popover>
                  <viz:VizFrame id="idVizFrame" visible="true" uiConfig="{applicationSet:'fiori'}"
                   height="78%" width="100%" vizType="column" selectData="onSelectMatGrp">
                      <viz:dataset>                
                          <viz.data:FlattenedDataset data="{localModel>/results}">
                              <viz.data:dimensions>
                                  <viz.data:DimensionDefinition name="Plant Name" value="{localModel>WERKS_NM}" />
                                  <viz.data:DimensionDefinition name="Material Group" value="{localModel>EXTWG}" />
                                  <viz.data:DimensionDefinition name="Plant Code" value="{localModel>WERKS}" />
                              </viz.data:dimensions>
                              <viz.data:measures>
                                  <viz.data:MeasureDefinition name="Gross Production" value="{localModel>GROSS_PRD}" />
                                  <viz.data:MeasureDefinition name="Net Production" value="{localModel>NET_PRD}" />
                                  <viz.data:MeasureDefinition name="Capacity" value="{localModel>CAPACITY}" />
                                  <viz.data:MeasureDefinition name="Last Month Gross" value="{localModel>LM_GROSS_PRD}" />
                                  <viz.data:MeasureDefinition name="Last Month Net" value="{localModel>LM_NET_PRD}" />
                              </viz.data:measures>
                          </viz.data:FlattenedDataset>   
                      </viz:dataset>
      
                      <viz:feeds>               
                          <viz.feeds:FeedItem uid="valueAxis" id="feedActualGPValues" type="Measure" values="Gross Production" />
                          <viz.feeds:FeedItem uid="valueAxis" id="feedActualNPValues" type="Measure" values="Net Production" />
                          <viz.feeds:FeedItem uid="valueAxis" id="feedActualCPValues" type="Measure" values="Capacity" />
                          <viz.feeds:FeedItem uid="valueAxis" id="feedActualLMGValues" type="Measure" values="Last Month Gross" />
                          <viz.feeds:FeedItem uid="valueAxis" id="feedActualLMNValues" type="Measure" values="Last Month Net" />
                          <viz.feeds:FeedItem uid="categoryAxis" isScrollable="true" id="feedCategoryAxis" type="Dimension" values="Plant Name,Material Group,Plant Code" />
                      </viz:feeds>               
                  </viz:VizFrame> 
      					
      			
      		</content>
      		<footer>
      			<Bar>
      			</Bar>
      		</footer>
      	</Page>
      </core:View>
      
      

       

      Thanks & Regards,

      Dilip

       

      Author's profile photo Sanjit Roy Chowdhury
      Sanjit Roy Chowdhury

      Hi Dilip,

      Thanks for the suggestions....I installed the eclipse new version (2019-06)...But there can not find the team->share project option for share my project into repository...What can i do to solve this???

      Thanks,

      Sanjit

       

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      Hi Sanjit,

      You can use eclipse version the same which you have downloaded.

      Now in this eclipse, you have to upload/import new UI5 libraries i.e. SAP NetWeaver Gateway plug-in for Eclipse.

      Please take below blogs reference for Eclipse setup

      https://blogs.sap.com/2013/04/03/my-journey-creating-a-sapui5-mobile-app-at-home-part-iii/

       

      Thanks & Regards,

      Dilip

      Author's profile photo rajesh salapu
      rajesh salapu

      hai im rajesh ,could you please help me to create my first fiori app in webide …..suggest me please…imvery confusing while creating ....i am confusing about to how to start...im new to sapui5 webide..

       

      Author's profile photo Dilip Kumar Krishnadev Pandey
      Dilip Kumar Krishnadev Pandey
      Blog Post Author

      Hi Rajesh,

      Sorry for very late reply, till now, you may have already addressed the requirement

      Following are the few nice blog-links for same:

      https://help.sap.com/viewer/cc0c305d2fab47bd808adcad3ca7ee9d/7.5.9/en-US/b6faae5a00d74a3989888e088f571df8.html

      https://blogs.sap.com/2019/09/05/how-to-create-first-fiori-app-using-templates-in-web-ide..../

       

      Thanks & Regards,

      Dilip