fiori Extension

[Former Member]

Dear All,

I am trying to extend fiori app sales order tracking. I am using Eclipes (fiori tool kit) and Web ide . I had follow many link from scn but still no result

I had test odata where i can able to see payment term the extended part but not in fiori app.

Below link i had fellow and also end to end  fiori extension. Still i am unable to figure out the issue why the data is not display in App.

http://scn.sap.com/docs/DOC-54928

http://scn.sap.com/docs/DOC-53177

[Former Member]

Hi Sandeep,

Thanks for reply.

Component.js

jQuery.sap.declare("cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.Component");

// use the load function for getting the optimized preload file if present

sap.ui.component.load({

  name: "cus.sd.salesorder.monitor", 

  url: jQuery.sap.getModulePath("cus.sd.salesorder.monitor.Z_SD_SO_MOM_11") + "/../{parent project url}" // provide parent project url

  // we use a URL relative to our own component; might be different if

  // extension app is deployed with customer namespace

});

cus.sd.salesorder.monitor.Component.extend("cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.Component", {

  metadata: {

  version : "1.0",

  config : {

  "sap.ca.i18Nconfigs": {

  "bundleName":"cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.i18n.i18n"

  },

            "sap.ca.serviceConfigs": [{

            name: "SRA018_SO_TRACKING_SRV",

                serviceUrl: "/sap/opu/odata/sap/ZSRA018_SO_TRACKING_SRV_01/",

                isDefault: true

             }],

  },

  customizing: {

  "sap.ui.viewExtensions": {

  "cus.sd.salesorder.monitor.view.S3New": {

  "extSOChangePaymentInfo": {

  className: "sap.ui.core.Fragment",

  fragmentName: "cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.view.extSOChangePaymentInfoCustom",

  type: "XML",

  },

  },

  "cus.sd.salesorder.monitor.view.S3": {

  "extSOChangePaymentInfo": {

  className: "sap.ui.core.Fragment",

  fragmentName: "cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.view.extSOChangePaymentInfoCustom",

  type: "XML",

  },

  },

  },

  "sap.ui.controllerExtensions": {

  "cus.sd.salesorder.monitor.view.S2": {

  controllerName: "cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.view.S2Custom",

  },

  },

  }

  }

});

[Former Member]

Hi Ramchandra ,

Thank you for the quick response.

Everything is looking fine.

Could you please share zip file of extended app and Edmx file format of ODATA service ?.

Thank you.

Regards

Sandeep

[Former Member]

Hi Sandeep,

Thanks for your reply. I can share the zip file and even my system. Let me know how i can do this or how you will able to get zip or access system.

Thanks

[Former Member]

Hi Sandeep,

Thanks for your reply .If required i can mail you te zip file of extened project.

Component.js

jQuery.sap.declare("cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.Component");

// use the load function for getting the optimized preload file if present

sap.ui.component.load({

  name: "cus.sd.salesorder.monitor", 

  url: jQuery.sap.getModulePath("cus.sd.salesorder.monitor.Z_SD_SO_MOM_11") + "/../{parent project url}" // provide parent project url

  // we use a URL relative to our own component; might be different if

  // extension app is deployed with customer namespace

});

cus.sd.salesorder.monitor.Component.extend("cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.Component", {

  metadata: {

  version : "1.0",

  config : {

  "sap.ca.i18Nconfigs": {

  "bundleName":"cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.i18n.i18n"

  },

            "sap.ca.serviceConfigs": [{

            name: "SRA018_SO_TRACKING_SRV",

                serviceUrl: "/sap/opu/odata/sap/ZSRA018_SO_TRACKING_SRV_01/",

                isDefault: true

             }],

  },

  customizing: {

  "sap.ui.viewExtensions": {

  "cus.sd.salesorder.monitor.view.S3New": {

  "extSOChangePaymentInfo": {

  className: "sap.ui.core.Fragment",

  fragmentName: "cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.view.extSOChangePaymentInfoCustom",

  type: "XML",

  },

  },

  "cus.sd.salesorder.monitor.view.S3": {

  "extSOChangePaymentInfo": {

  className: "sap.ui.core.Fragment",

  fragmentName: "cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.view.extSOChangePaymentInfoCustom",

  type: "XML",

  },

  },

  },

  "sap.ui.controllerExtensions": {

  "cus.sd.salesorder.monitor.view.S2": {

  controllerName: "cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.view.S2Custom",

  },

  },

  }

  }

});

[Former Member]

Hi Ramchandra,

I am looking two things from you in order to fix this issue .

1. Component.js file code of extended fiori app

2. While you are accessing your extended fiori app, press F12 and share the screen shot of same.

Thank you.

Regards

Sandeep

[Former Member]

Hi Sandeep,

Thanks for your input . If required i can share extension project zip file as well.

Component.js code

jQuery.sap.declare("cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.Component");

// use the load function for getting the optimized preload file if present

sap.ui.component.load({

  name: "cus.sd.salesorder.monitor", 

  url: jQuery.sap.getModulePath("cus.sd.salesorder.monitor.Z_SD_SO_MOM_11") + "/../{parent project url}" // provide parent project url

  // we use a URL relative to our own component; might be different if

  // extension app is deployed with customer namespace

});

cus.sd.salesorder.monitor.Component.extend("cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.Component", {

  metadata: {

  version : "1.0",

  config : {

  "sap.ca.i18Nconfigs": {

  "bundleName":"cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.i18n.i18n"

  },

            "sap.ca.serviceConfigs": [{

            name: "SRA018_SO_TRACKING_SRV",

                serviceUrl: "/sap/opu/odata/sap/ZSRA018_SO_TRACKING_SRV_01/",

                isDefault: true

             }],

  },

  customizing: {

  "sap.ui.viewExtensions": {

  "cus.sd.salesorder.monitor.view.S3New": {

  "extSOChangePaymentInfo": {

  className: "sap.ui.core.Fragment",

  fragmentName: "cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.view.extSOChangePaymentInfoCustom",

  type: "XML",

  },

  },

  "cus.sd.salesorder.monitor.view.S3": {

  "extSOChangePaymentInfo": {

  className: "sap.ui.core.Fragment",

  fragmentName: "cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.view.extSOChangePaymentInfoCustom",

  type: "XML",

  },

  },

  },

  "sap.ui.controllerExtensions": {

  "cus.sd.salesorder.monitor.view.S2": {

  controllerName: "cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.view.S2Custom",

  },

  },

  }

  }

});

[Former Member]

Hi Sandeep,

Thanks for your input . If required i can share the zip file of extension project .

Component.js code

jQuery.sap.declare("cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.Component");

// use the load function for getting the optimized preload file if present

sap.ui.component.load({

  name: "cus.sd.salesorder.monitor", 

  url: jQuery.sap.getModulePath("cus.sd.salesorder.monitor.Z_SD_SO_MOM_11") + "/../{parent project url}" // provide parent project url

  // we use a URL relative to our own component; might be different if

  // extension app is deployed with customer namespace

});

cus.sd.salesorder.monitor.Component.extend("cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.Component", {

  metadata: {

  version : "1.0",

  config : {

  "sap.ca.i18Nconfigs": {

  "bundleName":"cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.i18n.i18n"

  },

            "sap.ca.serviceConfigs": [{

            name: "SRA018_SO_TRACKING_SRV",

                serviceUrl: "/sap/opu/odata/sap/ZSRA018_SO_TRACKING_SRV_01/",

                isDefault: true

             }],

  },

  customizing: {

  "sap.ui.viewExtensions": {

  "cus.sd.salesorder.monitor.view.S3New": {

  "extSOChangePaymentInfo": {

  className: "sap.ui.core.Fragment",

  fragmentName: "cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.view.extSOChangePaymentInfoCustom",

  type: "XML",

  },

  },

  "cus.sd.salesorder.monitor.view.S3": {

  "extSOChangePaymentInfo": {

  className: "sap.ui.core.Fragment",

  fragmentName: "cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.view.extSOChangePaymentInfoCustom",

  type: "XML",

  },

  },

  },

  "sap.ui.controllerExtensions": {

  "cus.sd.salesorder.monitor.view.S2": {

  controllerName: "cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.view.S2Custom",

  },

  },

  }

  }

});

[Jocelyn_Dart]

Hi Ramchandra,

Both those documents are very helpful. And testing your OData is definitely a good first step. However you need to give some more clues as to WHY your app is not working so we can help you.  Let me make a few suggestions that may help you do that...

When extending apps always start from the Fiori Apps Library.  Fiori Apps Library

In there find the app and go to the Implementation section. 

There you will find the implementation and extensibility help for that particular app. This helps you work out what you can change.  It's worth telling us not just which app, but which view/controller/etc. you are trying to change.  Some changes require an update to multiple components.

You mention Web IDE? Are you using HCP Web IDE or Local Web IDE?

By preference use HCP Web IDE as this is always the most up to date and has the best help.

If you are using the Local Web IDE make very sure you have the latest version as it went through a major update only recently. 

You will also need some SAPUI5 knowledge.  The Web IDE will help you make the extensions correctly, but of course if something is not working you still need to know how to troubleshoot it.  For instance, in the Developer Tools of a Chrome browser you can find any errors that might be stopping your data from being displayed, or debug why your model is not reading the data.

I highly recommend the openSAP SAPUI5 course Developing Web Apps with SAPUI5 -

as an introduction to both the coding and the debugging. Remember you can always enter the course in self paced mode to get the slides, watch the videos and see how the experts debug SAPUI5.

Rgds,

Jocelyn

[Former Member]

Hi Jocelyn,

Thanks for informative reply.I just go point to point. I had develop UI5 application that is working ok in browser and in application but unble to to figure out what is going worng in Extension.

1.  I used Eclipes for Extension.

1.1 Extened my odata service and test in R/3 for which the value is showing for Extened field.

1.2 than i download the standrad application of Sales Order Tracking.

1.3 Import to Eclipes.

1.4 Create Extension of download application and replace the standrad service with my extent service.

1.5 Add view with name extSOChangePaymentInfoCustom.fragment.xml.

1.6 Check the Compenent.js file below code 

  "cus.sd.salesorder.monitor.view.S3": {

  "extSOChangePaymentInfo": {

  className: "sap.ui.core.Fragment",

  fragmentName: "cus.sd.salesorder.monitor.Z_SD_SO_MOM_11.view.extSOChangePaymentInfoCustom",

  type: "XML",

  },

  },

1.7 than upload to r/3 as bsp application.

1.8 Run the fiori application In Inspect element : Console , network i can se my service path and when i am testing that service independ in browser I can see the value that means i think odata is sending data for extened field .

1.9 but unable to show in fiori app.

2. The had wed ide local trial version but that shown error config error of abap developmen tool. that means its unble to connect r/3 system.

3. I had login in HCP but dont know how to connect local system.

Trust me i am trying this last more than 20 days but no result. Please help.

[Jocelyn_Dart]

Ok... so step it through....

1. Are you confident your extended fragment is being displayed at all? If not try adding a text field and checking if it shows up. If not it would indicate a problem with how your extension is placed within the app, or with how you have deployed the extended app.

2. If 1 is ok, then are you confident that you have formulated your payment terms field correctly for the content?  Perhaps consider checking that using realistic-looking mockserver data

3. If 1 & 2 are ok, then are you confident you have correctly referenced the OData model correctly for that field?  If not,  then post the snippet of xml code... and perhaps a shot of the relevant parts of your OData $metadata so we can help you check.

Rgds,

Jocelyn

[Former Member]

Hi ,

I am confident about odata service working . below xml code. Sorry if anything please let me know.

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">

<ObjectAttribute active="false" text="{i18n&gt;PAYMENTTERMS} {path:'PaymentTerms'}"/>

</core:FragmentDefinition>

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">

  <display-name>Project SAP Fiori</display-name>

  <servlet>

    <display-name>ResourceServlet</display-name>

    <servlet-name>ResourceServlet</servlet-name>

    <servlet-class>com.sap.ui5.resource.ResourceServlet</servlet-class>

  </servlet>

  <servlet-mapping>

    <servlet-name>ResourceServlet</servlet-name>

    <url-pattern>/resources/*</url-pattern>

  </servlet-mapping>

  <servlet-mapping>

    <servlet-name>ResourceServlet</servlet-name>

    <url-pattern>/test-resources/*</url-pattern>

  </servlet-mapping>

  <!-- ============================================================== -->

  <!-- UI5 proxy servlet used to handle application resources         -->

  <!-- ============================================================== -->

  <servlet>

  <display-name>ProxyServlet</display-name>

  <servlet-name>ProxyServlet</servlet-name>

  <servlet-class>com.sap.ui5.proxy.SimpleProxyServlet</servlet-class>

  </servlet>

  <servlet-mapping>

  <servlet-name>ProxyServlet</servlet-name>

  <url-pattern>/proxy/*</url-pattern>

  </servlet-mapping>

  <context-param>

    <param-name>com.sap.ui5.resource.DEV_MODE</param-name>

    <param-value>true</param-value>

  </context-param>

  <filter>

    <display-name>CacheControlFilter</display-name>

    <filter-name>CacheControlFilter</filter-name>

    <filter-class>com.sap.ui5.resource.CacheControlFilter</filter-class>

  </filter>

  <filter-mapping>

    <filter-name>CacheControlFilter</filter-name>

    <url-pattern>*.html</url-pattern>

  </filter-mapping>

  <filter-mapping>

    <filter-name>CacheControlFilter</filter-name>

    <url-pattern>*.js</url-pattern>

  </filter-mapping>

  <filter-mapping>

    <filter-name>CacheControlFilter</filter-name>

    <url-pattern>*.xml</url-pattern>

  </filter-mapping>

  <filter-mapping>

    <filter-name>CacheControlFilter</filter-name>

    <url-pattern>*.json</url-pattern>

  </filter-mapping>

  <filter-mapping>

    <filter-name>CacheControlFilter</filter-name>

    <url-pattern>*.css</url-pattern>

  </filter-mapping>

  <welcome-file-list>

    <welcome-file>index.html</welcome-file>

  </welcome-file-list>

</web-app>

[Former Member]

Hi,

Please let me know if anything is missing. And i very thankfully for your help.

web.xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">

  <display-name>Project SAP Fiori</display-name>

  <servlet>

    <display-name>ResourceServlet</display-name>

    <servlet-name>ResourceServlet</servlet-name>

    <servlet-class>com.sap.ui5.resource.ResourceServlet</servlet-class>

  </servlet>

  <servlet-mapping>

    <servlet-name>ResourceServlet</servlet-name>

    <url-pattern>/resources/*</url-pattern>

  </servlet-mapping>

  <servlet-mapping>

    <servlet-name>ResourceServlet</servlet-name>

    <url-pattern>/test-resources/*</url-pattern>

  </servlet-mapping>

  <!-- ============================================================== -->

  <!-- UI5 proxy servlet used to handle application resources         -->

  <!-- ============================================================== -->

  <servlet>

  <display-name>ProxyServlet</display-name>

  <servlet-name>ProxyServlet</servlet-name>

  <servlet-class>com.sap.ui5.proxy.SimpleProxyServlet</servlet-class>

  </servlet>

  <servlet-mapping>

  <servlet-name>ProxyServlet</servlet-name>

  <url-pattern>/proxy/*</url-pattern>

  </servlet-mapping>

  <context-param>

    <param-name>com.sap.ui5.resource.DEV_MODE</param-name>

    <param-value>true</param-value>

  </context-param>

  <filter>

    <display-name>CacheControlFilter</display-name>

    <filter-name>CacheControlFilter</filter-name>

    <filter-class>com.sap.ui5.resource.CacheControlFilter</filter-class>

  </filter>

  <filter-mapping>

    <filter-name>CacheControlFilter</filter-name>

    <url-pattern>*.html</url-pattern>

  </filter-mapping>

  <filter-mapping>

    <filter-name>CacheControlFilter</filter-name>

    <url-pattern>*.js</url-pattern>

  </filter-mapping>

  <filter-mapping>

    <filter-name>CacheControlFilter</filter-name>

    <url-pattern>*.xml</url-pattern>

  </filter-mapping>

  <filter-mapping>

    <filter-name>CacheControlFilter</filter-name>

    <url-pattern>*.json</url-pattern>

  </filter-mapping>

  <filter-mapping>

    <filter-name>CacheControlFilter</filter-name>

    <url-pattern>*.css</url-pattern>

  </filter-mapping>

  <welcome-file-list>

    <welcome-file>index.html</welcome-file>

  </welcome-file-list>

</web-app>

extSOChangePaymentInfoCustom.fragment.xml

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">

<ObjectAttribute active="false" text="{i18n&gt;PAYMENTTERMS} {path:'PaymentTerms'}"/>

</core:FragmentDefinition>