Skip to Content
Technical Articles
Author's profile photo Jocelyn Dart

Fiori elements – Status Icons and Semantic Colors

Latest Update November 2020: THIS POST IS NOW RETIRED – Please go directly to SAP Community topic for Fiori elements

It’s hard to believe that 4 years have passed since I first started blogging on SAP Fiori elements.

Since then it has grown from strength to strength. SAP Fiori elements apps are now the:

  • Preferred choice for SAP Fiori apps delivered for SAP S/4HANA
    • As at November 2020 nearly 900 of the more than 2K apps available are SAP Fiori elements app
  • Preferred and recommended choice for efficient development of your own custom-built apps
  • Preferred build approach for many of our customers… see the SAP TechEd 2020 session: Yorkshire Water uses SAP Fiori Elements to build Fiori apps quickly

The tooling has also changed from SAP Web IDE on SAP Cloud Platform Neo, to the next generation tooling SAP Fiori Tools.  SAP Fiori Tools are an extension of SAP Business Application Studio on SAP Cloud Platform Cloud Foundry that guide you through creating your own SAP Fiori elements apps – and they can be run offline on VSCode too.

So it’s time for this blog post to step gracefully aside and instead refer you to the current best resources for Fiori elements, including:

One last big hint: One of the most beneficial additions to the official documentation is the SAP Fiori elements feature map which explains what is available per floorplan for your SAPUI5 version – definitely worth a read!

 

But hey all knowledge has value so if you want to read how this used to work in the SAP Web IDE… read on!

*****

Continuing my series on Fiori elements … you’ll find more blogs in the Fiori elements wiki.

A simple way to add a little emphasis and pizazz to your Fiori elements apps is to add status icons and semantic colors to a text field.  Here we show how to do this using a List Report column as the example.

When you want to attract your business users’ attention, UI.Criticality is one of the easiest annotations you can use to add some visual bling to your Fiori elements apps.  It’s a great option for adding a status icon and a little semantic colour to a simple text or date field.

In this example status icons and semantic colors have been added to the text property Overall Status.  The original property text values Paid, Cancelled, New, and Delivered have been transformed with a status icon and semantic color.

Accessibility note: Notice that we automatically apply a different color *and* a different icon rather than relying on color alone.  This means that even users with red-green color-blindness can easily distinguish the criticality of different statuses. You can find more background on this topic in the success criterion of the Web Content Accessibility Guidelines.

Tip: What do we mean by semantic color? Certain colors have intrinsic meaning in many countries and cultures. In business some of the most recognized colors are those often referred to as “traffic light” colors:

  • Red meaning stop or negative
  • Yellow meaning be careful or warning,
  • Green meaning go or positive

And we add a 4th Grey meaning neutral.

There are 3 easy steps to using the criticality annotation:

  • Know how the criticality value maps to status icons and semantic colours
  • Map the criticality value to your target field
  • Add the UI.Criticality annotation to your target field

Let’s get to it!

Understanding Criticality Values

There are 4 possible criticality values. These map to status icons and semantic colors as follows:

Criticality Value Meaning Colour Icon
0 Neutral Grey
1 Negative Red  
2 Critical Yellow  
3 Positive Green  

 

Map the Criticality Value to your Target Field

Often the simplest way to map your criticality value to your target field is to map it to a separate calculated field of the same OData Service entity.

For example, if you are using a ABAP CDS View exposed as an OData Service, you could map the values of a text property OverallStatus of the entity SalesOrder to a new field Criticality by adding a simple CASE statement in your CDS View such as this:

Tip: Always make sure you activate and test your OData Service before adding the new value to your Fiori elements app.

Add the Criticality Annotation to your Target Field

All you need to do now is to add the criticality annotation to your target field in your Fiori element app.  You can do this:

  • In a Metadata extension of your CDS View
    • The recommended approach
  • Inline in your CDS View
    • Possible but not recommended – an easy option for sandpit scenarios
  • In the local annotations file of your Fiori element app
    • Possible & a useful option if you don’t have access to change the OData Service or you are reusing an existing OData Service in a new app and don’t want to impact any existing apps

For example if your Target Field is set up as a UI.DataField of a Fiori element List Report app, you can add your criticality annotation in a metadata extension of the CDS View like this:

Or in the SAP Cloud Platform Web IDE you can add the criticality to your local annotations file using the Annotation Modeler to assign the Criticality property as highlighted in this example:

Or directly using the XML editor of your local annotations XML file like this:

Now just run your app!

 

Take your Fiori elements app to the Next Level

If you are interested in Fiori elements you might also like to look at some of our videos on Youtube such as:

If you want to find out more on how to use the Annotation Modeler, you might like to look at some of our Annotation Modeler in SAP Web IDE videos on Youtube.

If you are going to SAP Teched 2017 and Interested in learning more about Fiori elements you might like to attend these sessions:

  • DX201 What’s New with SAP Fiori Elements
  • S4H276 Build a List Report SAP Fiori App: ABAP Programming Model for SAP S/4HANA
  • S4H279 Build Transactional SAP Fiori App: ABAP Programming Model for SAP S/4 HANA
  • DX264 Overview Page in SAP Fiori Elements
  • DX266 SAP Fiori Elements – Analytical List Page

And you can find more information on Developing apps with SAP Fiori elements in the SAPUI5 SDK and on the ABAP Programming Model for Fiori in the SAP Help Portal.

Screenshots shown on:

  • ABAP Development Tools on Eclipse Neon
  • Web IDE Version: 170720 
  • SAPUI5 version 1.46.11

Brought to you by S/4HANA RIG

Assigned Tags

      48 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Yuri Norov
      Yuri Norov

      Thanks, Jocelyn Dart Very usefull post!

      But I have one problem: when using BOPF DRAFT 2.0
      If you open object in change mode, then these fields always take the grey value (like criticality value = 0). In the "display" mode, everything displayed correctly

      Is this standard behavior?

       

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Oops sorry somehow that answer went missing... yes that's correct. When you are in Draft mode the data is technically being held in a separate database table so it doesn't form part of the main CDS view and calculated fields such as criticality won't be calculated until the draft data is Saved.

      Once you Save your data it is active and the semantic colours will show.

      Author's profile photo Joseph BERTHE
      Joseph BERTHE

      Hello,

      Thanks for your insigth on it 🙂

      But.... I've pass over 3h to discover that this feature is not available in the analytical table. So I would like o ask you, why it is not the same ? In the analytical scenario, this feature should be very usefull ?

      Probably I missed something 😉

      Kind regards,

      Joseph

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Hi Joseph,

      It's definitely available in the analytical table - I've seen this used.

      Why exactly do you think it's not available?

      Rgds,

      Jocelyn

       

      Author's profile photo Joseph BERTHE
      Joseph BERTHE

      Hello Jocelyn,

      In fact, in my scenario, I have a CDS view which provide annotation (just the minimum). The main annotations iare supported by an annotation.xml file from my Fiori element List report.

      After reading your blog I set the right properties into the annotation's file and I drive the list report with my CDS with this annotation :

      @DefaultAggregation: #SUM

      When I set that, the list report is an analytical table, and in that case, the icon/colors annotation does not work. When I remove it, the list report is a responsive table, and in this case it works.

      I'm wrong somewhere ?

      Regards,

      Jospeh

       

      Author's profile photo Former Member
      Former Member

      Hi Joseph,

      I came to the same result. Changing the list settings in the manifest.json to Grid oder Analytical leads to unavailability of semantic colors.

      The same happens when setting @Analytics.query: true. The service then gets its information from the query result, which is not capable to  display semantic colors.

      Might be a similiar reason for Grid/Analytical Table annotations first problem. Real pity. Would be awesome if this could be implemented. 

      Regards

      Lukas

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Hi folks, Good news is that this is coming in a future SAPUI5 release so keep watch on the SAPUI5 release "What's New" updates.

      Rgds

      Jocelyn

      Author's profile photo Jan Nyfeler
      Jan Nyfeler

      Hi Jocelyn

      Same for me, it does not work with Analytical Table, even in Web IDE.

      Do you have more information with what release it will work in combination with Analytical Table?

       

      Best regards

      Jan

      Author's profile photo Jan Mattfeld
      Jan Mattfeld

      Hi Jocelyn Dart ,

      using semantic colors inside the Analytical Table of a Fiori Elements Analytical List Page still seems to be impossible. While a responsive table works fine, the analytical table shows no coloring at all with UI5 1.60 or 1.73.

      This is particulary annoying, as the Fiori design guidelines suggest using semantic coloring inside the table [1]. Is there any news on this?

      Thanks!

      [1] https://experience.sap.com/fiori-design-web/analytical-table-alv/#content-alignment

       

      Author's profile photo Jan Mattfeld
      Jan Mattfeld

      Actually, the analytical table interprets the criticality annotation. However, it does not automatically request the additional field containing the criticality value. That's why the annotated field stays gray-ish.

      What solves the issue, are separate presentation variants for chart and table. The table variant should request at least the required criticality fields. Always requesting the criticality fields does not work though, as it interferes with the aggregation.

      Author's profile photo Vijay Jala
      Vijay Jala

      Is this issue resolved with the latest UI5 version? If so from which UI5 version it is available?

      At the moment the criticality does not have any importance on our Analytical table of SAP FE ALP report.

      Regards

      Vijay Jala

      Author's profile photo Ashutosh Kumar
      Ashutosh Kumar

      Hello Jocelyn,

      Is there any standard CDS example available which can be reffered for DATA POINT.

      I tried placing a Data point in Header Facet but its not working.

       

       

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Hi Ashutosh

      We keep improving the documentation in the SAPUI5 SDK for how to work with Fiori elements - see this description of DataPoints in the current documentation.

      https://sapui5.hana.ondemand.com/#/topic/c2a389a11a704b00886440031a3d43f9

      Also announced at SAP TechEd 2018 - see session "What's new in Fiori Elements" was the new Visual Editor (expanding on the current UI Adaptation Editor) that will enable WYSWYG changes and push down to CDS. This will gradually expand over time to include more floorplans & options over time

      So that should also help.

      In the meantime my best suggestion would be to look at the coding of the standard delivered Fiori apps in S/4HANA for ideas. 🙂

       

      Author's profile photo Jan Mattfeld
      Jan Mattfeld

      Hi Jocelyn Dart

      Inserting a DataPoint into the Object Page Header works fine by annotating any field with

      @UI.dataPoint

      But how to show a Header FieldGroup and a DataPoint side-by-side? The YouTube video you linked just adds two DataPoints and I am unsure how to reproduce the SDK annotation result by using CDS – there is no qualifier for DataPoints. I tried the following:

      @UI.facet: [
                   {
                     purpose: #HEADER,
                     type: #FIELDGROUP_REFERENCE,
                     targetQualifier: 'Supplier',
                     position: 10,
                     importance: #HIGH
                   },
                  {
                     purpose: #HEADER,
                     type: #DATAPOINT_REFERENCE,
                     targetElement: 'Status'
                     position: 20,
                     importance: #HIGH
                   }
      ]
      
      @UI.dataPoint: { title: 'Status' }
      Status,
      
      @UI.fieldGroup: [{qualifier: 'Supplier', position: 10, importance: #HIGH }]
      SupplierName,

      But this shows only the field group, no status data point.

      Is there a reference, or is it even possible?

      Thanks,
      Jan

      Author's profile photo Alexandre Doyen
      Alexandre Doyen

      Hello Jocelyn,

      thanks for this nice post 🙂

      I try to do the same in my list report. Here I want a status description (with criticality and without icon).

      But I have a custumer rule to get description status who depend of two different fields. So I added some features in Class OO DPC_EXT and that works only when I add my fields in the list report (ui.lineitem). When I remove them I lost my criticality status because OData (I think) do not consume them and I have not this fields in my DPC_EXT.

      Do you know how hide this fields but get it OData request ?

      Thank you very much.

      Author's profile photo Alexandre Doyen
      Alexandre Doyen

      Ok ... fixed ! You can use SET_QUERY_OPTIONS method of the IF_SADL_GW_QUERY_CONTROL.

       

      You can read all details here.

       

      Thanks all.

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Thanks Alexandre - I've added the blog series into the Fiori elements wiki https://wiki.scn.sap.com/wiki/display/Fiori/Fiori+elements

      Oh and a small note if you have future questions - please post them to answers.sap.com.  That makes it easier for everyone to find them and participate in getting the answer You can always use the Jocelyn Dart  mention option to let me know.

      Author's profile photo Tanveer Shaikh
      Tanveer Shaikh

      Hi Jocelyn,

      I have a list report using HANA xsodata service. I followed the steps as per this blog but the semantic colors/ icons do not show up . Also, List report is not analytical type.

      are there any limitations for xsodata vs ABAP CSD views  ?

      Thanks,

      Tanveer

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Hi Tanveer,

      Good question - yes there certainly are limitations when using HANA xsodata services, as they do not currently support many of the annotations we need for Fiori elements.

      This is one of the many reasons why S/4HANA uses ABAP CDS Views everywhere and not HANA CDS Views.  As ABAP CDS Views let us use the power of HANA underneath, while adding the advantages of annotations, metadata extensions, software lifecycle maintenance etc.

      There are very few scenarios now where we still recommend HANA views - and those are usually very complex analytics such as needed by Machine Learning.

      So as much as possible try to learn and use ABAP CDS Views as per the ABAP Programming Model for SAP Fiori. You will find more tutorials and links in the Fiori elements wiki to get you started.

      https://wiki.scn.sap.com/wiki/display/Fiori/Fiori+elements

      Rgds

      Jocelyn

      Author's profile photo Hiroyuki Goto
      Hiroyuki Goto

       

      Hi

       

      Is it possible to display field value with specific color or dynamic icon in place of field value using CDS?

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Hi Hiroyuki,

      Can you explain your business use case in a little more detail? There might be an alternative approach I can suggest.

      We only permit settings that are included as part of the Fiori design guidelines.

      The guidelines usually suggest an alternative for different use cases.

      E.g. This is the reference for semantic colors which has a link to how Fiori uses colours to represent different value states such as error, warning, etc.

      Rgds

      Jocelyn

      Author's profile photo Hiroyuki Goto
      Hiroyuki Goto

       

      Hi dart

       

      Thanks for the response

      My requirement is using CDS I display the table as list report in FIORI.

      there is field which will be blank or X.

      if it is plank I would like to display it an just a green icon of a test as COMPLETED in green colour.

      So I can across your post but this displays the field value along with a green box with which the user isn't satisfied.

      So would like to know the feasibility.

      Author's profile photo Mohammed Qaiser
      Mohammed Qaiser

      Hi Jocelyn,

      Hope you're well. I was hoping you could advise on a matter which is unrelated to the topic of this post. It relates to the usage of KPI tags in the Analytical List Page. I've noticed on site (https://sapui5.hana.ondemand.com/test-resources/sap/suite/ui/generic/template/demokit/flpSandbox.html#Shell-home) it is possible to create KPI tags at both the header of the analytical list page as well as the body of the analytical list page...

       

      I've managed to recreate a KPI tag at the header level but I'm trying to understand how to insert KPI tags into the 'Project Section' displayed in the analytical list? I've tried looking online but couldn't find any resources. Any suggestions?

      Many Thanks

      Qaiser

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      HI Qaiser

      If you have a query that is NOT related to the post, please raise a separate question in answers.sap.com.  If it's not related to the query I may not know anything about it.  And it's very hard to answer complex queries. from blog comments. Also as you can see like most of us I only get to help out in SAP Community in my rare spare time. So putting in answers.sap.com vastly increases the likelihood of getting an answer.

      Appreciate your understanding in this

       

      Author's profile photo Shiva Virambil
      Shiva Virambil

      Hi Jocelyn,

      Hope you are doing good!

      Can we able to set the Criticality for the custom column values as below in case statement.

      Case

      <Cond> value 'String1'

      <Cond> value 'String2'

      else

      <Cond> value 'String3'

      end as StringCol

      I have to set the Criticality Value for StringCol instead of ending with Criticality.

      Kindly let me know your Inputs.

      Thanks,

      Shiva.

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Hi Shiva

      Ok I would recommend asking about this in the ABAP topic area as well.

      If I'm understanding what you are trying to do, i.e. use a Case statement to derive your StringCol field, and then add criticality on top of that...

      Typically you would need a hierarchy of CDS Views to do this, i.e. an original CDS View which calculates/derives the StringCol value, and then a consumption view on top of that assigns a criticality to your derived StringCol value.  It's the consumption view on top that you use for your SAP Fiori app.

      I'm not an ABAP CDS View expert... however my understanding is that this is needed to deal with the way data is aggregated and persisted.

      Perhaps someone in the ABAP topic can give you a more elegant solution

      All the best

      Jocelyn

      Author's profile photo Priyanka Sadana
      Priyanka Sadana

      Hi Jocelyn,

      Very useful blog!

      I do not require @UI: {lineitem ....

      annotation. Is there any other annotation as well where I can mention the criticality.

       

      Thanks and regards,

      Priyanka Sadana

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Hi Priyanka, @Criticality is available for many elements. I would suggest check the SAP Fiori elements feature map on https://ui5.sap.com

      Author's profile photo Navneet Nair
      Navneet Nair

      So, first off, brilliant post. Cant even begin to thank you enough for how well this works in my case.

      But now, the user asks for a 'tooltip' on the icon, not an accompanying text in the column itself.

      Essentially, the user wants different tooltips for each icon and the same icon will be used as 'traffic lights' in different columns, with each column possibly having a different 'meaning' for say, a red, green and yellow icon. I tried everything I could, but no tooltip appears. Is this even possible?

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      HI Navneet - thanks so much for the encouragement!

      I would suggest you ask that question on https://answers.sap.com - and perhaps check the Fiori elements feature map in the SAPUI5 SDK at https://ui5.sap.com

      Author's profile photo Navneet Nair
      Navneet Nair

      Will do. Thanks!

      Author's profile photo Dmitriy Ostrovskiy
      Dmitriy Ostrovskiy

      Hello Jocelyn.

      I want to show the field with the color value in the row of my ListReport.

      It is impossible to display in one field criticality on another field, which doesn’t show in a row?

      I have three fields:

      Status (Values: [‘O’,’C’])

      Text (Values: [‘Open’, ‘Cleared’]

      Criticality (Values: [3,1,0]

      When I disable the Criticality field then the Status field does not show any value

      Consumption view

             @UI.lineItem.position: 1
             @UI.lineItem.value: 'ClearingStatusText'
             @UI.lineItem.criticality: 'Criticality'
             ClearingStatus,
             @UI.lineItem.position: 5
             case ClearingStatus
              when 'O' then 3
              when 'C' then 1
              else 0
             end as Criticality,
             @UI.selectionField.position: 20
             @Consumption.valueHelpDefinition:
                  [{entity:{
                              element: 'Text',
                              name: 'YCDS_VH_FI_DOC_ITEM_STATUS_CLR'
                           }
                  }] 
             _ClearingStatusHelp.Text as ClearingStatusText,

      after that I get

      With field

      When I set @UI.hidden = true for Criticality field I get next

             @UI.lineItem.position: 1
             @UI.lineItem.value: 'ClearingStatusText'
             @UI.lineItem.criticality: 'Criticality'
             ClearingStatus,
             @UI.lineItem.position: 5
             @UI.hidden: true
             case ClearingStatus
              when 'O' then 3
              when 'C' then 1
              else 0
             end as Criticality,
             @UI.selectionField.position: 20
             @Consumption.valueHelpDefinition:
                  [{entity:{
                              element: 'Text',
                              name: 'YCDS_VH_FI_DOC_ITEM_STATUS_CLR'
                           }
                  }] 
             _ClearingStatusHelp.Text as ClearingStatusText,

      Without field

      Value help view

      @AbapCatalog.sqlViewName: 'YV_FI_DISC'
      @AbapCatalog.compiler.compareFilter: true
      @AccessControl.authorizationCheck: #NOT_REQUIRED
      @ObjectModel.resultSet.sizeCategory: #XS
      @ObjectModel.dataCategory: #TEXT
      @ObjectModel.representativeKey: 'ClearingStatus'
      @EndUserText.label: 'Item clearing status'
      @Search.searchable: true
      define view YCDS_VH_FI_DOC_ITEM_STATUS_CLR 
       as select from    dd07l as FixedValue
          left outer join dd07t as ValueText on  FixedValue.domname    = ValueText.domname
                                             and FixedValue.domvalue_l = ValueText.domvalue_l
                                             and FixedValue.as4local   = ValueText.as4local
      
      {
            
        key cast( FixedValue.domvalue_l as yefi_item_status) as ClearingStatus,
            --
            @Semantics.language: true
            ValueText.ddlanguage,
            @Search.fuzzinessThreshold: 0.8
            @Semantics.text: true -- identifies the text field
            @Search.defaultSearchElement: true
            cast( ValueText.ddtext as yefi_item_status_text)     as Text
      }
      
      where
            FixedValue.as4local  = 'A' --Active
        and ValueText.ddlanguage = $session.system_language
        and FixedValue.domname = 'YDFI_ITEM_STATUS'
        and FixedValue.domvalue_l <> 'A'
      

      With best regards, Dmitry

      Author's profile photo Dmitriy Ostrovskiy
      Dmitriy Ostrovskiy

      It’s working when I set tabletype = GridTable

      "settings": {
      "condensedTableLayout": true,
      "smartVariantManagement": true,
      "enableTableFilterInPageVariant": false,
      "tableType": "GridTable"
      }

      Author's profile photo Former Member
      Former Member

      Is there a solution for the "AnalyticalTable"?
      If I hide the field "Criticality" with "@UI.hidden: true", this does not work for me either.

      regards Tim

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Hi Dmitry and Tim, As you can see it is very difficult for authors to respond to specific issues in blog comments.  It can be quite some time when you are relying on one very busy person to get to your comment. Please post a question on https://answers.sap.com where many others in the SAP Community can help you.  Lots of customers, partners, independents, and SAP employees who already use SAP Fiori elements are there to help you!

      Author's profile photo David Garcia
      David Garcia

      Did you find any solution for this? I am working with the analytical table and I am facing the same issue

      Author's profile photo Tejas Chouhan
      Tejas Chouhan

      Is there a way to make characters bold via annotations in Fiori elements?

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      HI Tejas, Not that I am aware of ... however you might want to ask that on https://answers.sap.com

      Author's profile photo Rajendra Kumar Panigrahy
      Rajendra Kumar Panigrahy

      Hi , I am using the same thing as in CDS calculated a new field ..

      and in metadata as this

      @UI: { lineItem: [{position: 70 , importance: #MEDIUM , value: 'OrderOverallStatus' , criticality: 'Criticality'} ],

      OrderOverallStatus;

       

      I am able to see the values of criticality as 1, 2, 3 when i select  the column or field but its not coming a traffic light in the same field .. is that any other annotation or something I am missing ?

       

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Hi Rajendra, As you can see it is very difficult for authors to respond to specific issues in blog comments.  It can be quite some time when you are relying on one very busy person to get to your comment. Please post a question on https://answers.sap.com where many others in the SAP Community can help you.  Lots of customers, partners, independents, and SAP employees who already use SAP Fiori elements are there to help you!

      Author's profile photo Rajendra Kumar Panigrahy
      Rajendra Kumar Panigrahy

      .looks like if the same view I am calculating the value of criticality and using it with expose its not working .. I  have to add to a filed in a view and then expose that and use it in C view then it works ?

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Hi Rajendra, As you can see it is very difficult for authors to respond to specific issues in blog comments.  It can be quite some time when you are relying on one very busy person to get to your comment. Please post a question on https://answers.sap.com where many others in the SAP Community can help you.  Lots of customers, partners, independents, and SAP employees who already use SAP Fiori elements are there to help you!

      Author's profile photo Shrutika Hadgal
      Shrutika Hadgal

      HI Jocelyn,

      Thankyou for your post.

       

      My question is - along with status change I want to throw error message if a certain field is left blank in fiori element. Kindly, assist me.

      For instance-

      How to make any existing field mandatory, say on click of save we need to throw error message if a certain field is left blank.

       

       

      Regards,

      Shrutika H

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Hi Shrutika, As you can see it is very difficult for authors to respond to specific issues in blog comments.  It can be quite some time when you are relying on one very busy person to get to your comment. Please post a question on https://answers.sap.com where many others in the SAP Community can help you.  Lots of customers, partners, independents, and SAP employees who already use SAP Fiori elements are there to help you!

      Author's profile photo Former Member
      Former Member

      Thanks Jocelyn, still waiting for a SAP press book with your expertise as a handy reference. I am a big fan of your book on Workflows.

      I just created a simple test code for my understanding of this feature. Just these 2-3 lines nothing else is required for showing criticality. I am using the RAP latest release. The feature works like a charm 😀

      @AbapCatalog.sqlViewName: 'ZV_CUSTOMER_ASSO'
      @AbapCatalog.compiler.compareFilter: true
      @AbapCatalog.preserveKey: true
      @AccessControl.authorizationCheck: #CHECK
      @EndUserText.label: 'Assoc'
      define view ZI_CUSTOMER_ASSOC
      as select from zi_psb_cust_data
      association [0..1] to zi_psb_cust_health as _cust2health on $projection.Tel = _cust2health.Tel
      {

      key zi_psb_cust_data.Tel as Tel,
      zi_psb_cust_data.Fname as Fname,
      zi_psb_cust_data.Mname as Mname,
      zi_psb_cust_data.Lname as Lname,
      zi_psb_cust_data.Adr1 as Adr1,
      zi_psb_cust_data.Adr2 as Adr2,
      zi_psb_cust_data.Alive as LifeStatus,
      zi_psb_cust_data.Gender as Gender,
      zi_psb_cust_data.Married as Married,
      case Married when 'X' then 3 else 1 end as MaritalStatusCriticality,
      case when Gender = 'M' then 'Mr.'
      when Gender = 'F' and Married = 'X' then 'Mrs.'
      else 'Miss'
      end as Salutation,
      _cust2health.Height,
      _cust2health.Weight,
      _cust2health.Bloodgroup,
      _cust2health.Rhesussign, // Make association public
      _cust2health
      }

      So, the CDS assoc above calculates the value, now the UI annotation in the root CDS will make it display ready.

      @AccessControl.authorizationCheck: #CHECK
      @EndUserText.label: 'root'
      define root view entity ZI_CUSTOMER_ROOT
      as select from ZI_CUSTOMER_ASSOC
      {
      @UI.lineItem: [ { position: 10, label: 'Telephone/Mobile Number' } ]
      key Tel,

      @UI.lineItem: [ { position: 20, label: 'Salutation' } ]
      Salutation,

      @UI.lineItem: [ { position: 25, label: 'First Name' } ]
      Fname,

      @UI.lineItem: [ { position: 30, label: 'Middle Name' } ]
      Mname,

      @UI.lineItem: [ { position: 40, label: 'Last Name' } ]
      Lname,

      @UI.lineItem: [ { position: 50, label: 'Current City' } ]
      Adr1,

      @UI.lineItem: [ { position: 60, label: 'Country' } ]
      Adr2,

      @UI.lineItem: [ { position: 70, label: 'Living Status' } ]
      LifeStatus,

      @UI.lineItem: [ { position: 90, label: 'Marital Status' } ]
      Married,

      @UI.lineItem: [{ position: 95, value: 'Married', criticality: 'MaritalStatusCriticality' }]
      MaritalStatusCriticality,

      @UI.lineItem: [ { position: 95, label: 'Gender' } ]
      Gender,
      @UI.lineItem: [ { position: 100, label: 'Height(cms)' } ]
      _cust2health.Height,

      @UI.lineItem: [ { position: 110, label: 'Weight(Kilos)' } ]
      _cust2health.Weight,

      @UI.lineItem: [ { position: 120, label: 'Blood Group' } ]
      _cust2health.Bloodgroup,

      @UI.lineItem: [ { position: 130, label: 'RH Sign' } ]
      _cust2health.Rhesussign,
      /* Associations */
      _cust2health

      }

      Author's profile photo Irshita Aggarwal
      Irshita Aggarwal

      Hi Jocelyn
      I am a novice in fiori. Trying to add criticality but not seeing any change in color/icon.
      Field EvStatus is showing value 1/2 as I have populated. But not showing icon/color.

      Can you guide me where I am going wrong.

      Author's profile photo Sri Bandi
      Sri Bandi

      Your annotation is not setting the Criticality path correctly. Path for Criticality needs to reference to an Integer value between 0-3 set in OData.

       

      <PropertyValue Property="Criticality" Path="EvStatusCriticality"/>

      Author's profile photo Felipe Araujo de Carvalho
      Felipe Araujo de Carvalho

      Thanks for your insigth on it !