Skip to Content

Thing-Based UIs and Custom Solutions in Cloud for Customer

In the SAP Cloud Applications Studio for Cloud for Customer two different UI “paradigms” are supported:

  • Thing based screens: Screens with “new” floorplan types (Object Work List (OWL), Quick View (QV), Quick Create (QC), and Thing Inspector (TI) and thing-based navigation (SAP-internally also referred to as UX3)
  • OBN-based screens: Screens with the ByDesign floorplan types (Object Work List (OWL), Quick Activity (QA) and Object Instance Floorplan (OIF) and Object Based Navigation- (OBN-) based navigation (SAP-internally also referred to as UX2)

They are used for:

  • Thing based screens: for casual users and tablet computer UIs.
  • OBN-based screens: for professional users and mobile device (smartphone) UIs.

In this document, I will outline the features of the thing-based UIs as supported in the SAP Cloud Applications Studio for Cloud for Customer.  This document is relevant for you if are developing (or planning) a custom solution for SAP Cloud for Customer with SAP Cloud Applications Studio and you want to learn about the thing-based UI. 

I assume that you are familiar with UI development in SAP Business ByDesign (if not, read the introducing documentation on the UI designer in the help documents or Chapter 4 “User Interface” of my book “SAP Business ByDesign Studio -Application Development” ( http://www.sap-press.com/products/SAP-Business-ByDesign-Studio-%E2%80%94-Application-Development.html ).

This document does not replace the documentation and the how-to guides on UI development, but is meant as an overview on the features.

The following figures provide an overview on the UI paradigms in ByDesign and in Sales OD:

ByD_UI.png

Figure 1: OBN-based screens: (1) Work center; (2) Work center view; (3) Object work list (OWL); (4) Quick activity; (5) Object instance; (6) Object-based navigation. (Figure taken from my book “SAP Business ByDesign Studio -Application Development”)

SoD_UI.png

Figure 2: Thing based screens: (1) Work center; (2) Work center view; (3) Object work list (OWL); (4) Quick Create; (5) Quick View; (6) Thing Inspector; (7) Thing Type; ES: Enterprise Search; FD: Feeder

The follwoing terms and abbreviations are used in this document:

  • BO: Business object
  • SDK:  SAP Cloud Developer Studio for Sales OnDemand
  • Custom BO: Business object implemented with the studio
  • ByD/SoD tenant: Tenant on an SAP Business ByDesign or SAP Sales OnDemand system

Here we go. The complete prototype takes about 1 hour.

Business Object and Screen Generation

First, I will define the business object Project in the SDK, save and activate it:

import AP.Common.GDT as apCommonGDT;

import AP.CRM.Global;

import AP.FO.BusinessPartner.Global;

import AP.PC.IdentityManagement.Global;

businessobject Project raises NoValidPeriod, NoValidAccount {

   message NoValidPeriod   text “Enter a valid period”;

   message NoValidAccount  text “Enter a valid account”;

   [AlternativeKey] element ID : ID;

   element Name :LANGUAGEINDEPENDENT_EXTENDED_Name;  // 255 char

   [Label(“Account”)] element AccountID : BusinessPartnerInternalID;

   association ToAccount to Customer;

      

   [Label(“Opportunity”)] element PrecedingOpportunityID : BusinessTransactionDocumentID;

   association ToOpportunity to Opportunity;

  [Label(“Owner”)] element ResponsibleEmployeeID : EmployeeID;

   association ToResponsibleEmployee to Employee;

      

   [Label(“Start At”)] element StartDate : Date;

   [Label(“End At”)] element EndDate : Date;

  element SalesVolume : Amount = {currencyCode = “USD”};

   element ComplementaryMaintenance : Indicator;

   element EndOfComplementaryMaintenance :    Date;

   [Label(“Status”)] element ProcessingStatusCode: ProcessingStatusCode = “1”;

      

   [Label(“Changed At”)] element ChangedDateTime : GLOBAL_DateTime;

   association ToChangedIdentity to Identity;

}

If you are an experienced SDK user, you will have noticed that I have used features in the BO definition language to set the Label and default values (for example for the currencyCode element).

On top of the Project custom business object, I will create a UI for creation, viewing and editing. So, I just have to select the business object, select Create screens from the context menu and select “Screen Scenario with Thing-based Navigation in the dialog box. The system creates

  • A work center and work center view,
  • An object work list (OWL)
  • Quick View (QV), Quick Create (QC), and Thing Inspector (TI)
  • a thing type (TT) model and the thing-based navigation between the floorplan

After generation, I can immediately assign the work center and work center view to my test user and start creating projects in the UIs. Of course, I can also start the screens directyl from the SDK with my development user.

Fine-Tuning for Generated Screens

The generated screens need some “fine tuning”. These manual activities include:

  1. Work center / Work center view: Change the work center name (defaulted: woc: <BO name (singular)>, wocview:  <BO name (singular)>_View. Change to <BO name (plural)> or another name)
  2. Thing type: Change the icon (defaulted: dummy icon)
  3. Change name of Thing inspector, Quick create, Quick view (defaulted: <BO name>_TI, <BO name>_QC, <BO name>_QV, change to meaningful name
  4. TI, QC, QV: Maintain binding for Primary Text & Secondary Text
  5. Define the navigation to other “things”: whenever you have an ID of another BO on your screens, configure the navigation to the thing inspector of the BO. Go to the DataModel tab of the UI designer, select an ID field (for example the AccountID) and maintain the property “Associated thing type” of the ID field (for example: COD_ACCOUNT_TT). (If you are an experienced SDK user, you will have noticed that the configuration of the navigation is much easier than the OBN-based navigation was in the ByDesign UI.)
  6. ID/Description mapping: For a “modern” UI design, you might want to hide the IDs on your UIs and show the name or descriptions of the BOs only. To do so, maintain the ID/Description mapping:
    1. On the Designer tab of the UI designer, you can set the property “PresentationMode” to “DescriptionOnly”.
    2. Go to the DataModel tab of the UI designer, select an ID field (for example the AccountID) and maintain the property “Identifier Description” (for example ToAccount -> CurrentCommon -> BusinessPartnerFormattedName)
  7. QC, TI: maintain the object value selectors (OVS) for input fields. (Same as for UI development in ByDesign)
  8. OWL: The generated OWL provides a table view visualization. You might want to create alternative visualizations for example a card view (see Figure 3 as example)

For the fine-tuning of the UIs, you can use the same procedures as for ByDesign (see the documentation on the UI designer in the help documents or Chapter 4 “User Interface” of my book “SAP Business ByDesign Studio -Application Development” ( http://www.sap-press.com/products/SAP-Business-ByDesign-Studio-%E2%80%94-Application-Development.html ).

Even “mixed UI scenarios” are possible. For example, you can configure an OBN from a screen that belongs to a thing-based UI scenario to a screen that belongs to OBN scenario.

PROJECT_CARD_VIEW.PNG

Figure 3: Thing based screens: Work Center/View; Object Work List (OWL) with Card View, and Quick View

Application-defined Queries in the UI Designer (“SADL Queries”)

The default query QueryByElements that is generated for each BO node does not support full index support. It has in general a linear dependency on the number of instances in the business object node. Therefore it should be used only if:

  • The expected number of records in the node is small (< 1000), for example in case of a object with configuration data, or
  • The selection parameter list contains an equal condition on an element that is alternative key of the node. An alternative key is supported by an index.

In all other cases, an application-defined query (defined by Query Wizard)) has to be used. An application-defined query supports full index support on all query elements.  

As a new feature in the SDK for Sales OnDemand, you can alternatively define an application-defined query directly in the UI designer. In the UI designer, this is called a “SADL query”.

The generated OWL uses the generated QueryByElements query of the BO root node. To convert the OWL, perform the following configuration steps in the generated OWL:

  1. Delete the existing query. The dependent default set and the structure SearchParameters in the data model is deleted automatically.
  2. Define a new SADL query.
    1. Go to the Controller tab -> “Queries” -> “New SADL Query”: A „Query“ query and a “DefaultSet” default set is created
    2. Open “Query”
    3. Configure Result List: “/Root/DataList”
    4. Configure Business Object Elements: Selection (preselected), Basic Find, Result
    5. Open “Query” -> “DefaultSet” and configure Title “All <BOs>” (find an appropriate description of your query)
  3. Define the find form and the default set mapping:
    1. Go to the Designer tab -> “AdvancedListPane: Object Work List” -> Open “Find Forms”, click “Add” and configure Search Text Binding /Root/SearchParameters/SearchText
    2. Go to the ObjectWorkList -> Default Set Mapping, move “DefaultSet” from Available Default Sets list to Binding table and for “DefaultSet” configure FindForm: FindFormPane
    3. Configure Default DefaultSet: DefaultSet

(For details on application-specific queries and for find forms, see the help documents or Sections 3.6 and 4.3 of my book “SAP Business ByDesign Studio -Application Development” ( http://www.sap-press.com/products/SAP-Business-ByDesign-Studio-%E2%80%94-Application-Development.html )).

Tags, Flags, Favorites, and Sticky notes

Tags, Flags, Favorites, and Sticky notes on custom UIs are supported. Prerequisites is that BO is enabled for Enterprise Search (see the respective section, below). Another prerequistie is a meaningful configuation of the primary and secondary text in the QV and the TI.

Enterprise Search and Feeds

Enterprise search and feed enabling for a custom BO can be configured in the “Create Query” wizard of the SDK (context menu on the business object definition project item). In the “Create Query” wizard, new flags “Enable for Enterprise Search” and “Enable for Feed” have been introduced.

  • Custom BOs can be used a source of a feed. This means you can create a feed out of a screen  on your custom BO and the feed will be shown in the “feed wall” on the TI of a custom BO)
  • Custom BO can be used as a reference in the feed text. This means in a feed text, you can type “@” and at least two characters and the enterprise search will find custom BO instances.
  • System feeds from custom BOs are not supported

As a manual activity, you have to configure the BO as “Enterprise Search Object”  in the work center view.

Mobile Devices

You can use thing-based screens (OWL, QV,QC, TI) directly on tablet PCs (currently supported: iPad player). The following properties have to be configured on the floor plans: Tags: Device = “Tablet” & Device = “Desktop”.

iPadAll.png

Figure 4: Thing based screens on a tablet computer

For smartphone UI, you have to configure additional screens tailored for usability on smartphones. Here, the same rules and guidelines as for ByDesign apply.

REST/OData Services

You can use REST/OData-based web services of the ByD/SoD tenant for user-to-system communication. SAP supports the OData-Protocol. OData follows the principles of REST. OData provides a uniform interface. This means that when you address items in an OData communication, you interact with a service (using HTTP verbs) in the same way across any OData Service (i.e. how to construct URIs), regardless of the data it exposes. For details on the OData protocol, see http://www.odata.org.

REST/OData-based web services are

  • implemented with the UI designer on top of SAP BOs or custom BOs
  • implemented with the report designer on top of SAP data sources or custom data sources

Scope

  • Read (query, retrieve) operations on top of a SAP BO or custom BO; write (create, update, delete, action) operations are not supported in FP4.0
  • Request and response data type are flat structures and do not contains hierarchies

Usage: User to system communication (for example for native mobile devices)

Development process overview (1): thing type-based REST services

  • In the studio select a business object and create a thing type (under “Create Screens”)
  • Open the thing type in the UI designer and configure the binding and the navigation for the OData service. In the Data Model, configure Result Instance and Result List: nodeID = NodeID;  title: for example to ID; description: for example to Name. In the Controller, open “Queries” -> “ListQuery”, select “Convert to SADL query” from the context menu and define the query (see: Section “SADL Queries”, above)
  • Define the authorization (add the thing type to a work center)

Development process overview (2): report based REST services: To be done

The REST service URL to query all instances of a custom BO is composed as:

<https://<hostname>/sap/byd/rest/<workcenter.svc>/<thing type short ID>+”s”>

Extensibility of SAP (SoD) UIs

Thing-based SAP screens of Sales OnDemand are extensible. Stable anchors on the UI floor plans define the positions and the outports that can be used for extensibility. The following main extension scenarios are supported:

  • Add extension field to section group (section group anchor required)
  • Add custom embedded component as new facet (tab) in the TI (view switch anchor and outport anchor required)
  • Add custom embedded component as existing facet (tab) in the TI (section group anchor and outport anchor required)
11 Comments
You must be Logged on to comment or reply to a post.
  • 1) Is the SoD Studio different than the ByD Studio, or is the ‘Cloud Developer Studio’ just a matter of connecting to the relevant SoD or ByD tenant

    2) Who has access to SoD development tenants

    3) I have CRM add-on going into the SAP Store for ByD that would also be applicable to SoD. Is there a process for SoD add-on candidacy/portability

    4) In developing SoD solutions, is the link between the Foundation (for Account) and CRM deployment units ‘built-in’ (no need to create service integration)?

    Great blog and sorry for all the questions!

    • 1) The SDKs for ByDesign (“SAP Business ByDesign Studio”) for Sales OnDemand (“SAP Cloud Developer Studio”) are basically the same. Technically the same code, but different codelines. But some features are supported only in one codeline. The main difference is the UI. The new, thing-based UI is supported for SoD only. Over time, we will see more differences. We will publish a feature list soon.

      2) This is currently under discussion. In principle each SoD customer should be able to request a test tenant that can be used for development of customer-specific solutions.

      3) There is no process. A partner would have to create two different add-ons. The reason is that ByD and the SoD will develop in different directions over time (technical features and public solution model).

      4) Direct communication, no service integration.

      • Hi Thomas,

        It’s been more than a year so just want to know if you can update us more on CoD SDK and the changes brought to it by SAP and any architectural difference in UI compared to older version.

        Thanks for the information you provided.

          • Hello Thomas,

            this is a very interesting blog. You deserve your 5 stars. 😉

            I also did buy your book on Application Dev in ByDesign a long time ago, it is soooo useful!

            However I have a question on the UI designer of ByDesign.

            You are saying that we can do Card Views for an OWL in C4C. Is it possible in ByDesign? I am trying to do this for so long now and I just cannot find where I do set up the card view for my OWL.

            I tried to replicated the exact same OWL in ByD as in C4C for the Products, but even if all the settings are the same, I cannot get the 3 different views: List, Card, Tiles.

            Any help would be greatly appreciated!

            Thank you very much for your attention and your help.

            Best regards.

            Jacques-Antoine

          • Hi Jacques-Antoine,

            I am not working for ByDesign for some time, so I can make no official statement here. I think (but this is my godfeeling) that you can implement card views also for ByDesign because the technology is the same. Unfortunately I do not know of an documentation for this. But I know of colleages who took existing card views from C4C, analyzed the XML and have rebuild it in the UI designer for their UI.

            Best regards,

            Thomas

            .

            I would post this as new question in the forum. So the chance that someone picks it ans answers it is higher than the comment here.

          • Hello Thomas,

            thank you very much for your answer.

            Do you analyse the XML from the page’s source code in a web browser or from the UI designer?

            Anyway, as you told me, I will post a new discussion for this question.

            Thank you for your attention.

            Best regards.

            Jacques-Antoine

          • Hi Jacques-Antoine,

            in the UI designer there is a menu option that shows the XML of the UI component. But you can use any XML-aware editor for analyzing the structure of the component. But  this is tedious work! It is definietly better to ask for a how-to in the forum.

            Best regards, Thomas