Skip to Content
Author's profile photo Vinay Hospete Krishnappa

Develop Fiori List Report and Object Page – Fiori Elements – Using Northwind odata service and local annotations

To develop fiori application using smart templates having odata service as backend.

You may have annotations on backend(preferably CDS , gateway project etc) or in frontend UI project.

Sap Web IDE comprises of several features and plugins.

With the help of Annotation Modeler tool, one can add/modify annotations in UI project.

Let’s use northwind odata service which does contain any pre-set annotations from backend to create Fiori list report application.

No javascript coding required !!! Little knowledge on annotations is enough to start.

Step 1:

Sign up for a free trial account on SAP Cloud Platform

https://www.sap.com/developer/tutorials/hcp-create-trial-account.html

Step 2:

Create a Destination on SAP Cloud Platform

https://www.sap.com/developer/tutorials/hcp-create-destination.html

Step 3:

Open SAP WEB IDE

  1. In the navigation pane (left side), choose Services.
  2. On the Services pane, search for “web ide”.
  3. select SAP Web IDE tile, In the “SAP Web IDE Overview” page click on link Open SAP Web IDE.

Step 4:

Create List Report Application in SAP WEB IDE

  • In the menu bar, select File > New > Project from Template.
  • Under Template selection, select “List Report Application” and click next

Enter Basic Information details as shown below and click on next

Project Name orderSmartApp
Title Manage Order
Namespace com
Description Manage Orders

Under Sources (left side) select service URL and choose “Northwind Odata Service” as a system to connect to a required service.

Enter relative URL “V2/northwind/northwind.svc” in the text field shown below.

Click on Test button to check whether service is available. If you are able to see data in the Service Table, then connection to service is successful, click on Next.

Northwind odata service does not contain any annotations from backend. So the Table is empty. Click on Next

Choose Odata Collection and Navigation as shown below and click on Finish.

New smart template project “orderSmartApp” is created

Project files and structure is available under WEB IDE workspace.

Step 5:

Create Annotation File

  • Right click on webapp folder in the project, select New à Folder

Enter folder name annotation click OK.

  • Right click on annotation folder in the project, select  Annotation File
  • Check file name and service is already filled. Click Next

  • Check whether project folder structure is as shown below.
  • Open annotation.xml file, Double click on it

annotation.xml file opens up with Annotation Modeler UI.

At any point of time, you can check xml code by switching view to code editor which is available in footer bar.

Step 6:

Add annotations using Annotation modeller

List report page contains following areas.

  • Header Title
  • Header content – smart filter
  • Smart table
  • Footer toolbar

To add Smart table using annotations. Choose “Order” in Odata Entity Type dropdown and click on Annotate Button.

Select “Annotations” row in table and click on + (plus button) shown under “Actions” column

  • Pop up opens up listing applicable annotations. Select LineItem (represents smart table in application) and click OK, UI.LineItem annotation is added in the Table

To show initially visible columns in smart table, add DataField as a child to UI.lineItem.

Select UI.LineItem row –> click (+) button and select Datafield under records –> OK

This resolves to first column in LRP app smart table.

Select OrderId in dropdown for UI.DataField value.

Repeat adding UI.DataField for additional columns in smart table.

To add Smart Filter using annotations.

Select “Annotations” row in table and click on + (plus button) shown under “Actions” column. Select “selectionFields” –> press OK

Select UI.selectionFields row and click on (+) button. select item and press OK

Add more Item to add selection fields as required

Step 7:

Run the Application

Select project root folder “orderSmartApp” and click on “Run” icon as shown below.

Click on GO button. Application shows list of orders.

Select any order in table, application navigates to detail page of an order(also known as Object page).

Object page contains three sections i.e snapping header, navigation bar and content area.

Now, let’s add some more annotations to Odata service to see order details in object page

Step 8:

Go to Annotaion Modeler, add UI.DataPoint annotation to create snapping header for Order ID, customer Id and Order Date

Enter value for Qualifier, title and value to show Order ID in header section of object page. Repeat adding UI.DataPoint for customer id and order date as shown in below snapshot.

 

Run application (step 7) and click on any order in list report. Application navigates to detail page with header section containing customer Id, order id and order date

Step 9:

Lets add annotations to create content area containing order and shipper information.

Add UI.FieldGroup for order information having fields(order id, order date and required date)

Add UI.FieldGroup for shipper information having fields(shipper name, address, city country)

Provide Qualifier “OrderDetails” and “ShipmentDetails”.

Click (+) on each UI.DataField row and add Label.

Enter value for Label.

Select value for all UI.DataField value as shown in below snapshot .

Step 10:

To create navigation area of object page and add content created in above step 9. Add UI.Facet and its children UI.ReferenceFacet as shown below

 

Step 11:

Run the application (step 7) . List Report and Object Page application is ready.

 

 

For more reference on other possible features using annotations, Please refer to standard documentation from SAP

https://help.sap.com/viewer/b4b7cba328bc480d9b373c7da9335537/2.08/en-US/83c89ccef12f48ab98f6c3811bd025b3.html

https://help.sap.com/viewer/b4b7cba328bc480d9b373c7da9335537/2.08/en-US/3cdebeebb04b4205908140242c9d6817.html

 

Assigned Tags

      79 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo mary anne
      mary anne

      Thanks a lot! 🙂

      Author's profile photo Former Member
      Former Member

      Nice blog!!

      Author's profile photo Francisco Javier Gurbindo
      Francisco Javier Gurbindo

      Hi Vinay. Thanks for your post!

      I'm trying to follow it but i can't make the content area works. It's always empty. I don't know whats wrong.

      DataPoints works fine and I see the information but Facets and Identifications don't.

      Do you know what I'm doing wrong?

      Thanks in advance.

      Kiko

      Author's profile photo Francisco Javier Gurbindo
      Francisco Javier Gurbindo

      The problem was the cache data of chrome browser. I delete it and it works fine.

      Thanks!!

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      Well you found out problem so fast... Great 🙂

      Author's profile photo sudarshan raju
      sudarshan raju

      Hi Vinay,

      Great Blog. Helped a lot.

      Have small question.. without creating annotation file the app will load the smart table as list report where we can customize the fields and filters on the screen itself right?

       

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      Yes. App is loaded with list report without any columns and filters, you can add filters and columns to table on demand using dialogs.

      You need annotations either from backend or in annotation.xml file for object page.

      Author's profile photo Stefano Cataldo
      Stefano Cataldo

      Hi, I also had issues with the area. I will open a new comment for telling you how I solve. I only reply to this comment in addition, because this comment is about the topic. So, if cleaning the cache doesn't help you, feel invited to scroll down all over the comments.

       

      Author's profile photo Former Member
      Former Member

      Hi,

      First of all thanks for the very detailed blog.

      I have an additional requirement to add a Download to Excel button for the list. Can you help with that.

      Also. I notice you have two custom buttons one is + and the other is Details. Could you explain how to add them and in which scenario we can use them.

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      Hi Sayan,

      Please go through below blog for an additional requirement to add a Download to Excel button for the list

      https://blogs.sap.com/2017/08/27/fiori-elements-export-to-microsoft-excel-via-the-ui-adaptation-editor/

      Best regards,

      Vinay

       

      Author's profile photo Tal Tzafriri-Adi
      Tal Tzafriri-Adi

      IHow can we add the export to excel button to fiori list report if we only have the personal version of WebIDE (no UI Adaptation editor)?

      Author's profile photo Hitesh Parmar
      Hitesh Parmar

      As you do not have access to UI Adaptation Editor, the only way I can think of is using List Report extension. You can take the id of the smart table by sap.ui.getCore().byId("Id of the Smart Table") and then set the exportToExcel property to true.

      For creating an extension, steps are similar to this blog: https://blogs.sap.com/2017/10/29/fiori-elements-how-to-create-an-object-page-extension/comment-page-1/#comment-420878

      Best Regards,
      Hitesh

      Author's profile photo Harshal Narkhede
      Harshal Narkhede

      Hi Vinay,

       

      Nice blog .

      can you please help me on binding data to UI.SELECTIONFIELDS annotaions as no data is coming in  input fields like OrderID or CustomerID.

      Thanks in advance.

      Regards,

      Harshal

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      Add "Item" to UI.SelectionField and map it to entity type property "OrderId" and "CustomerID". You can refer in one of the screenshot above

      Author's profile photo Naseera Rahmathilahi
      Naseera Rahmathilahi

      Great blog!

      Author's profile photo Tanveer Shaikh
      Tanveer Shaikh

      Hi Vinay,

      I am trying to build a navigation from List report line item document number to some other app – i.e have document number as link

      Snippet from local annotations  in UI.LineItem-

      <Annotation Term="UI.LineItem">
        <Collection>
           <Record Type="UI.DataField">
             .
             .
             .
      <Record Type="UI.DataFieldForIntentBasedNavigation">
           <PropertyValue Property="SemanticObject" String="MySalesOrder"/>
           <PropertyValue Property="Inline" Bool="true"/>
           <PropertyValue Property="Label" String="Manage"/>
           <PropertyValue Property="Action"  String="display"/>
      </Record>
         </Collection>
      </Annotation>

      Doesn’t work. ofcourse I am missing something, but didn’t find any blog/reference/KBA  – Can you please help ? what all changes will be required in mainfest.json ? will this need to extend the list report or this can be done without extension ? Is there any reference/blog available to refer ?

      I am using all local annotations in annotation modeler with xsodata, No ABAP CDS.

      Thanks,

      Tanveer

       

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      You are using a semantic object "MySalesOrder".

      Semantic objects are used for role-based navigation within the Fiori Launchpad. A semantic object is defined using the Semantic Object catalog following the naming rules of the virtual data model (VDM). In addition to the definition, a registration needs to be done centrally in U00.

      After creating semantic object then at run time the navigation works in Fiori launchpad.

       

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      Navigation using semantic objects

      https://help.sap.com/viewer/cc1c7615ee2f4a699a9272453379006c/7.5.6/en-US/bd8ae3d327ab4541bcce8e7353c046fc.html

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      Navigation for external links using DataFieldWithURL

      https://help.sap.com/saphelp_uiaddon20/helpdata/en/a4/2427550b72436a8bdf53045b06effb/frameset.htm

      Author's profile photo Stefano Cataldo
      Stefano Cataldo

      Hi at all,

      yeahhhhh ...  I get it 😉 . Thanks to the Autor for the nice tutorial.

      I get some issues with the UI Facets and navigation area (step 10). I use Version: 170330 ... and work on webide  provided by SAP Cloud Plattform.

      For resolving the issues I was forced to have one more level on my annotation file. At first I create a UI.Facets, than I crate a UI.CollectionFacet and finally I can have the UI.ReferenceFacet (see screenshots at the bottom). Please notice, that I don't use language dependent labels (i18n - folder) which is only okay for trainee purpose in my opinion.  Also you may consider to have a look at the tutorials following the link below which explain it much more clear than I. I kindly ask to Autor to be not offended by my comment .. it is not me correcting him.

      https://blogs.sap.com/2017/08/22/fiori-elements-how-to-develop-an-object-page/

      Regards, Stefano

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      Using reference facet inside collection facet is an another valid use case to group several references under one section.

      Author's profile photo Stefano Cataldo
      Stefano Cataldo

      PS: One question still remain: at the end the label "Oder Information" is smaller then the label "Shippment Info". Do somebody know why ... I don't expect font size to change in between one view on same headline level :O

      Hmmmm .... I cannot edit my own comment. It said something about I was logged out. It is not possible ... however, I made a second comment. Sorry for that.

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      As per Fiori design, next section label is emphasized with an underline

      Author's profile photo Harshil Jain
      Harshil Jain

      Nice tutorial 🙂

      Can you help me to enable the edit, delete actions on object page?

       

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      Edit and delete actions are enabled by default in object page.

      You cannot delete anything from a Northwind service 🙂

       

      Author's profile photo Harshil Jain
      Harshil Jain

      Is there a way to overwrite the default save option on the object page?

      For example to trigger some validation for the editable fields upon user's save action.

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      I would not recommend to override actions on overflow tool bar.

      On edit, validation check happens automatically on focus out of controls. No additional code or extensions required.

      Changes are saved as draft while entering data.

      On save, changes are posted to backend.

      Author's profile photo Harshil Jain
      Harshil Jain

      Hi Vinay ,

       

      Can you guide me how to enable validations on edit button?

       

      Regards,

      Harshil

      Author's profile photo Tanveer Shaikh
      Tanveer Shaikh

      Hi Vinay,

      Your bog and comments helped a lot !

      If we have list report and object page, is it possible to show the fields from object page’s associated/navigation entity type as selection fields on the list report page ?

      I see the navigation option but seems doesn’t work.  Any insight will help !

      Thanks,

      Tanveer

       

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      You can add filters only for entity type binded to list report table.

      You cannot add associated/navigation entity type as selection fields on the list report page.

      But, it can be solved in backend. Use joins and expose the associated field with entity type binded to list report table, then you can add selection field for this field.

       

      Author's profile photo Tanveer Shaikh
      Tanveer Shaikh

      Hi Vinay,

       

      Thanks for your reply. I tried that and it works but there is a major limitation.

      filter on associated field works only if the carnality is 1:1. If List report to object page carnality is 1:n ( For example multiple materials per sales order ) then the filter on associated field does not work.

      I have not found any solution so far, posted a question in Q&A as well. No workable solution yet.

      Thanks,

      Tanveer

      Author's profile photo Srilaxmi divi
      Srilaxmi divi

      Hi Vinay,

       

      Nice blog..

      I followed the same and I can able to display data perfectly using northwind  odata service. But when I tried to create application from my back end service, The second page is not getting displayed. when I select any entry in first page and navigate to page 2, It is showing as error " The request data was not found" . Is there any problem with the backend odata service? could you please help me?

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      Please check  $batch request in network tab whether data is served. If data is available make sure UI.fieldgroup annotation fields gets the right data.

      Author's profile photo Srilaxmi divi
      Srilaxmi divi

      Hi Vinay,

       

      Thank you for the reply. There was an issue with my back end service. Now it is working fine. Could you please tell me the procedure for adding another odata service to display data in object page? That means I have requirement in which I need to display data from one odata service in first page and after navigation it should display data from different odata service in object page. How can I achieve this? Please help me!

       

      Thanks,

      Srilaxmi

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      As per architecture, to keep it clean and simple we follow to have one odata service for one application. In case if you need from third party service,,,,you can use break outs and extend sections in object page.

      Author's profile photo Srilaxmi divi
      Srilaxmi divi

      Thank you.

       

      Now I have managed everything in single odata service.

      One more problem which I am facing is I am unable to add labels for only particular to selection fields. It is working fine for line items. but when it comes to selection fields, labels are not getting displayed. Could you please tell me any alternative to over come this issue?

       

      Thanks,

      Srilaxmi

       

       

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Is there a way to add UI annotations for a normal SAPUI5 application?

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      Do you mean Free style ? or master detail ?

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      free style

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      Yes, you can apply annotations in freestyle app at a limited scope

      for example: lineitem annotation for a smart table used in free style app.

      1. Create new folder annotations

      2. create new annotation file

      3. add annotations on entity type

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      I tried but it did not work. i tried explicitly giving a smart table control and referred the annotated entity. I also tried just giving line item annotations to check if the control was generated automatically . both approaches failed.

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      Please refer to below sample

      Place Smart table in a view of your free style app

      Main.view.xml

       

      Add line item annotation to apply changes on top.

      Application shows first three columns applied from annotations and other columns from smart table property "initiallyVisible|Fields"

       

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Thanks a lot. Let me try and get back to you

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Hi Vinay,

       

      I tried with Northwind V2 service. I could find data in the service when I run it separately. But my app shows no data.Please help

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Thanks Vinay. I was able to create a freestyle app with annotations. Can we Create Facet annotation using this?

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      As it is free style, you can use annotations listed in sapui5 controls API documentation.

      UI.Facet is read by object page template, not by any control.

      Author's profile photo SHINY NICKITHA CHELLAM J
      SHINY NICKITHA CHELLAM J

      Crystal clean explanation. Thanks Vinay for the blog 🙂

      I was able to add a lineItem column to my freestyle app. Can we add a link column to the a freestyle app?

      On click of the link a dialog has to open.

      Is this possible?

      Thanks

      Shiny

       

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      Offcourse, you can add

      <Record Type="UI.DataFieldWithUrl">
      <PropertyValue Property="Url">
      <Apply Function="odata.fillUriTemplate">
      <String>https://www.sap.com/{name}</String>
      <LabeledElement Name="name" Path="FirstName"/>
      </Apply>
      </PropertyValue>
      <PropertyValue Property="Value" Path="Country"/>
      </Record>

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      Opening a dialog is not possible. But you can navigate to url specified in annotation.

      Currently URL without parameters does not work in smart table, i am following up with smarttable team colleagues, But URL along with parameter works. refer to below example and documentation

      https://sapui5.hana.ondemand.com/#/api/sap.ui.comp.smarttable.SmartTable/annotations/DataFieldWithUrl

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      Solution: URL without parameters

      Author's profile photo SHINY NICKITHA CHELLAM J
      SHINY NICKITHA CHELLAM J

      Thanks a lot Vinay 🙂

      Author's profile photo Kathiresan Jayaraj
      Kathiresan Jayaraj

      Hi Vinay,

      I have one doubt, How can we enable the Tab Navigation option instead of  default anchor navigation in Facets section.

      Thanks,

      Kathir

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      Hi Jayaraj,

      We do not support tab navigation for Facets. Anchor navigation is the only possible option.

      Best regards,

      Vinay

      Author's profile photo Kathiresan Jayaraj
      Kathiresan Jayaraj

      Thanks for your information vinay.

      Regards,

      Kathir

      Author's profile photo Yuri Norov
      Yuri Norov

       

      Hello, hello, everyone.

      Sorry for offtop.

      Does anyone know how to add ValueList to DataField on ObjectPage? (with CDS or local annotation)

      I have perfectly worked SelectionField with ValueList, but on ObjectPage it is not displayed.

      Application build with HANA CDS, local annotation is not used.

      I will be grateful for any links

      thanks, Yuri

       

       

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      Please refer to

      https://sapui5.hana.ondemand.com/#/api/sap.ui.comp.smartfield.SmartField/annotations/ValueList

      1. Add a valuelist annotation for the desired entitype property.for ex: category
      2. Provide collectionpath i.e list of all categories
      3. Map in out parameters
      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      Annotate entity type property with valuelist in local annotation file

       

       

      Author's profile photo Yuri Norov
      Yuri Norov

      Thanks for quick reply, Vinay!

      I saw UI5 link. I'm using CDS annotation for ValueList like this:

      It works in both variant, but only for selection field on "list report screen", but it is not working for "object page"

      I will try your suggestion

       

      Author's profile photo SHINY NICKITHA CHELLAM J
      SHINY NICKITHA CHELLAM J

      Hello Vinay,

      I have a smart field  added to my freestyle app. I wanted to add a value help to one of my field. With the references from google I see we need to have Odata annotations set. Can we have the same achieved from our ui annotation?

       

      Many Thanks in Advace

      Shiny

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author
      Add valuelist annotation and configure it as described in below documentation to see value-help for smart fields
      July 3, 2018 at 1:43 pm

      Please refer to

      https://sapui5.hana.ondemand.com/#/api/sap.ui.comp.smartfield.SmartField/annotations/ValueList

      1. Add a valuelist annotation for the desired entitype property.for ex: category
      2. Provide collectionpath i.e list of all categories
      3. Map in out parameters

       

      Author's profile photo SHINY NICKITHA CHELLAM J
      SHINY NICKITHA CHELLAM J

      Hi Vinay,

      Thanks a ton.. It works.

      However, my smart field is not getting rendered as multiInput.

      Can we have multiinput enabled?

       

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      Multiinput is enabled on smart filters on list report page. But, not on detail (object page) page

      because the field can be bound to only one value (offcourse , from pop up you can choose the values, but select one at the end)

      Author's profile photo Kaushik Maiti
      Kaushik Maiti

      Hello Vinay,

      I  did the same in SAPUI5 Application but smart filter bar is not fetching the data from northwind , I have added both smart filter bar and smart table , table is working fine.

      can you suggest something for this..

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      In case of free style apps, you need to configure and write logic to fetch data from northwind service.

      Only apps created with templates can fetch data automatically without extra code.

      Author's profile photo Natarajan Srikanta
      Natarajan Srikanta

      Hi Vinay,

      I’m trying to bring an ovs in master page.

      For this we are manually creating annotation.xml file from webide and binding the standard odata (saptrx/EM_SRV) service to annotation.xml. In view i had used smart field.

      However i couldnt see the output.

      Any advice would be helpful.

       

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      Hi Natarajan,

      Please add annotation.xml file entry in manifest.json, so that app can consider annotations at runtime.

       

      If you do not know the syntax, just create new annotation file from the context menu(adds entry in manifest). Then, you can add/ copy annotations in to this file.

       

      Best regards,

      Vinay

      Author's profile photo Kshitij Saxena
      Kshitij Saxena

      Hi Vinay – In my case the filter is not appearing, but when I click on Go, all the data is displayed. Can you pls help.

       

      Regards

      Kshitij

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author

      Hi Kshitij,

      Please check UI.SelectionField annotation is annotated correctly.

      Check whether the value of PropertyPath expression points to correct entity type property.

       

      Best regards,

      Vinay

      Author's profile photo Kshitij Saxena
      Kshitij Saxena

      HI Vinay – The issue was resolved by selecting “filterable” in Odata model. However the selection fields are not filtering the data. Do we need to do anything special in annotation or Odata model?

      Author's profile photo Vinay Hospete Krishnappa
      Vinay Hospete Krishnappa
      Blog Post Author
      1. On click of "GO" button. Please check the request query in developer tool(F12). should contain filter params.
      Author's profile photo Greg Mr
      Greg Mr

      Hi Vinay

      thanks a lot for nice blog !!!

      Very good explanation and it works well but I have problems with alignment in section (please see picture)

      Could you please help me ?

      Thanks

      Greg

       

       

       

      Author's profile photo Greg Mr
      Greg Mr

      Author's profile photo Hitesh Parmar
      Hitesh Parmar

      Hello Greg,

      This is because Fiori Elements is now using Column layout for the smart form by default so that UI space is utilized properly. If you do not wish to have this behavior, you can switch back to the previous behavior by setting the manifest flag.

      You can check the documentation here: https://sapui5.hana.ondemand.com/#/topic/4e49753530ad4a73a44a5f8efac238d6

      Best Regards,
      Hitesh

      Author's profile photo Ferry Djaja
      Ferry Djaja

      Hi Vinay, Nice blog! thanks for sharing.

       

      I have a question here, I am developing the same with HANA Database, everything is perfect except for Update function, I can create, delete records and updated in HANA database. But not on Update function. Anything I am missing here ?

      Cheers,
      Ferry

      Author's profile photo Alex Caruntu
      Alex Caruntu

      Hi Vinay,

      I have a transactional app, not using draft functionality, with one header consumption view, one for item and one for texts, using annotations:

      • @ObjectModel.association.type: [#TO_COMPOSITION_ROOT, #TO_COMPOSITION_PARENT]
      • @ObjectModel.association.type: #TO_COMPOSITION_CHILD

      When I created the Project, in WebIDE, via template List Report based on my OData from my Header CDS, I`ve chosen the main OData service and navigation to_Item, so leaving out the Text view.

      In result I have the following scenario:

      Both header and item have the “insert” functionality, but not the Text Table. Is this a normal behavior? Or did I forget something in my annotations?

      My MDE file which annotates my header CDS view

      @Metadata.layer: #PARTNER
      @UI.headerInfo: { typeName: 'Handle Type - Header',
                        typeNamePlural: 'Handle Types - Header',
                        title: { type: #STANDARD, value: 'HandleType'}}
      
      annotate view YFIORI_FB_C_300 with
      {
      
        @UI.facet: [  {
                    label : 'General Information',
                    id : 'GeneralInfo',
                    purpose: #STANDARD,
                    type : #COLLECTION,
                    position: 10
                },
                {
                    label: 'Basic Data',
                    id : 'BasicData',
                    purpose: #STANDARD,
                    parentId : 'GeneralInfo',
                    type : #IDENTIFICATION_REFERENCE,
                    targetQualifier : 'one',
                    position: 20
                },
      
                {
                    label: 'Handle Part Type',
                    id  : 'HPTYPE',
                    purpose: #STANDARD,
                    type : #LINEITEM_REFERENCE,
                    targetElement: '_Item',
                    position: 30
                },
      
                {
                    label: 'Text Table',
                    id  : 'HTTEXT',
                    purpose: #STANDARD,
                    type : #LINEITEM_REFERENCE,
                    targetElement: '_HText',
                    position: 40
                }]
      
        @UI.fieldGroup : [{ qualifier : 'one',
                            position : 10 }]
      
        @UI: { selectionField: [{ position: 10 }],
               lineItem      : [{position: 10}],
               identification: [{position: 10, importance: #HIGH, label: 'Handle Type'}]}
        handletype;
      
      
        @UI.fieldGroup : [{ qualifier : 'one',
                           position : 20 }]
      
        @UI: { lineItem      : [{position: 20, importance: #HIGH, label: 'Handle Cutout' }],
               identification: [{position: 20, importance: #HIGH, label: 'Handle Cutout' }],
               textArrangement: #TEXT_LAST}
        handlecutout;
      
      }

      And my Text Table CDS consumption:

      @AbapCatalog.sqlViewName: 'YFIORI_F_VC300T'
      @AbapCatalog.compiler.compareFilter: true
      @AbapCatalog.preserveKey: true
      @AccessControl.authorizationCheck: #NOT_REQUIRED
      @EndUserText.label: 'Handle Type - Texts'
      @VDM.viewType: #CONSUMPTION
      
      @ObjectModel:{
          createEnabled: true,
          updateEnabled: true,
          deleteEnabled: true,
          semanticKey: ['handletype', 'langu']
      }
      
      define view YFIORI_FB_C_300T
        as select from YFIORI_FB_I_300T as Text
        association [1..1] to YFIORI_FB_C_300 as _Header on $projection.handletype = _Header.handletype
      {
      
        @UI: { lineItem      : [{position: 10, label: 'Handle Type'}],
               identification: [{position: 10, importance: #HIGH, label: 'Handle Type' }]}
        key Text.handletype,
        
        @UI: { lineItem      : [{position: 20, label: 'Language'}],
               identification: [{position: 20, importance: #HIGH, label: 'Language' }]}
        key Text.langu,
        
        @UI: { lineItem      : [{position: 30, label: 'Description'}],
               identification: [{position: 30, importance: #HIGH, label: 'Description' }]}
            Text.description,
            
        @ObjectModel.association.type: [#TO_COMPOSITION_PARENT, #TO_COMPOSITION_ROOT]
        _Header    
      }
      

       

      How can I enable the “insert” also on the Text Table (third facet) ?

      Any answer will be highly appreciated.

      Thanks in advance,

      Alex

      Author's profile photo Paul McFarling
      Paul McFarling

      In case someone else stumbles on this, you have to manually add the pages entry to manifest.json for the 2nd table. i.e.

       

      "pages": {
      "ObjectPage|to_zsclin": {
      "navigationProperty": "to_zsclin",
      "entitySet": "ZDSN_C_SCLIN",
      "component": {
      "name": "sap.suite.ui.generic.template.ObjectPage"
      }
      },
      "ObjectPage|to_zelin_clin": {
      "navigationProperty": "to_zelin_clin",
      "entitySet": "ZDSN_C_ELIN_CLIN",
      "component": {
      "name": "sap.suite.ui.generic.template.ObjectPage"
      }
      }
      }

      Author's profile photo Shantanu Deshmukh
      Shantanu Deshmukh

      How to disable $batch request?

      I tried setting groupid to $direct still requests are going using $batch.

       "": {
                      "dataSource": "mainService",
                      "preload": true,
                      "settings": {
                          "synchronizationMode": "None",
                          "operationMode": "Server",
                          "autoExpandSelect": true,
                          "earlyRequests": true,
                          "groupId":"$direct"
                      }
      Author's profile photo Kandikunta Gnaneshwar
      Kandikunta Gnaneshwar

      Hi Vinay,

      Very Detailed blog which is very helpful.

      Can we create Overview page using local annotations ? and on click of any card it should navigate to list report is this scenario possible.

      Thanks in advance.

       

      Regards,

      K Gnaneshwar.