SAP Community - User Interface

Designing with Code (Part 3) – SAP Web Components

2023-11-13T07:24:15+01:00

Our daily work is busy and usually there is a long list of tasks lining up: there are designs to be completed, discussions to be held, and reviews to be conducted, and so on...

...there is no time to take a step back and think.

Even if we know that some tasks could be done more efficiently, we often stick to the existing patterns because we lack the time to explore something different.

In the first part of this article series, I described that my time as a fellow in one of our product areas gave me the possibility to take this step back and learn how to create prototypes using our major UI technologies. I used this new skill to complement and complete my design workflow, rather than to replace the design phase. In the second article, I described, how design tools like Figma can be used in a way that already prepares your designs for implementation by using component libraries, styles, and layouts.

In this article, I want to give you an easy start into the development of prototypes using SAP Web Components. Even if you have no idea of HTML, JavaScript, or CSS, this will help you understand how things belong together. If you have a basic understanding of web development, this might open you the path into your own prototypes by offering you a simple and portable setup.

All code examples, the full article text, and additional detailed explanations on how to set up the text editor and other topics can be found on the GitHub page for this series: Design with Code.

Web Components

Web components are UI elements that you can embed into regular HTML. With them you can extend the predefined set of UI elements (input, button, etc.) that HTML offers. By using web components, you don’t have to care about the internals of the components as they are hidden away from you. The web component, like any other HTML element, offers you a tag name and a set of properties to control its behavior and appearance.

Web components are restricted to the presentation and behavior of the user interface element and purposely don’t include methods to handle data or communicate with a server. This functionality is added manually via JavaScript or by wrapping web components for use in JavaScript frameworks like React, Angular, Vue or SAPUI5.

As web components are so targeted, they can be used to provide a consistent presentation layer for various implementation frameworks, i.e., build the component once and then use it in several technologies, which you can see in the following figure.

Figure 1 – Web components are restricted to presentation and component behavior. To use it in an application, data and logic must be implemented using plain JavaScript or by wrapping the web component for use in one of the JavaScript frameworks like React, Angular, Vue or SAPUI5.

SAP offers a web component library with more than 60 components that implement SAP’s design language and that can be used to build applications following the SAP Fiori design system for business applications. This component library including code is publicly available and can be extended based on individual needs using the same infrastructure. Wrappers for React and Angular are also available.

For this first example, we will use a setup with the plain web components without any framework.

Simple Prototyping Setup

To set up your first prototyping environment, it is enough to create an empty folder on your hard drive. In this folder, create a file called index.html and open it in an editor.
To make your life easier, you should use a dedicated code editor like VSCode from Microsoft, but even notepad will do for the start.

You now need to create the basic elements of an HTML file and add a reference to the web components library.

<!DOCTYPE html>

<html>

 <head>

  <meta charset="UTF-8">

  <script type="module" src="https://sap.github.io/ui5-webcomponents/assets/js/ui5-webcomponents/bundle.esm.js"></script>

 </head>

 <body>

  <!-- Content goes here -->

 </body>

</html>

Listing 1 - The basic HTML page with a reference to the web components library.

In Listing 1 you can see the basic elements of an HTML page without any contents in the body yet. What is important here is that we include the web component library as a JavaScript module into our page. Now, the browser is aware of all web components published by SAP in this bundle on GitHub. This link always points to the latest stable version of the web components.

It is important to note that this approach is not recommended if you want to develop productive applications. This bundle contains a lot of resources that your application eventually will not need, and this will slow down the performance. For a proper development setup, you should follow the instructions provided in the documentation.

As we are not planning to release our prototype as a productive application, we are safe to use this bundle to benefit from the simple setup at the cost of performance.

Now you can add your first web component into the page. We will use the ui5-button as one of the simpler components.

...

<body>

 <ui5-button>My First Button</ui5-button>

</body>

...

Listing 2 - Adding a button web component to the page.

As a result, you should be able to see a button on an empty page if you open your index.html in a browser.

Figure 2 - The empty page with a button.

You will see that this button already is interactive and will react on hover and click. But of course, nothing will happen outside of this component-internal behavior. As described above, web components don't contain any logic outside of the component behavior. This will have to be added by us later.

Another thing catches your eye right away: the button doesn't look as it should according to the latest designs using the Horizon theme. In fact, what we see here, is that it still uses the old Quartz theme, which is set as default by the web components.

This means we need to switch to the new horizon theme.

...



<head>

 <meta charset="UTF-8">

 <script type="module" 

  src="https://sap.github.io/ui5-webcomponents/assets/js/ui5-webcomponents/bundle.esm.js"></script>

 <script data-ui5-config type="application/json">

  {

   "theme": "sap_horizon"

  }

 </script>

</head>



...

Listing 3 - Setting the theme as a configuration parameter in the HTML header.

Including this script into the header of the HTML document tells the web components library to load the Horizon theme instead of the default. This is a configuration that is applied to the entire application. You can also experiment by setting other valid themes like sap_horizon_dark or sap_horizon_hcb. You will find a list of all themes as well as other configuration parameters in the documentation. If you reload your browser, the button should now show in the right design.

Figure 3 - The button with the Horizon theme.

You can find the source code for this example on GitHub in the design-with-code project.

We have now created a very simple setup that allows you to display web components in a plain HTML page. This is a good start, but we now need to see what is needed to create an application prototype.

Using Web Components

All available SAP web components can be found in the [official documentation](https://sap.github.io/ui5-webcomponents/). In the left navigation bar, all available components are listed. The tag name for the components is prefixed with ui5- as a namespace to avoid naming conflicts when components from different libraries are used (for example, to differentiate the ui5-button from the standard HTML button).

Properties

The appearance and the behavior of web components can be controlled by the properties they expose. You find the properties of each SAP Web Component in the documentation.

The documentation for the button for instance lists the design property, which allows the following values: Default,Emphasized, Positive, Negative, Transparent, Attention. If the property is not actively set, Default will be applied automatically.

Figure 4 - Documentation of the design property with the available options, the default value and the possibility to set a value in the interactive example on top of the table.

The documentation of the web components is interactive, so that you can explore the properties right in the documentation which is great to understand the purpose if you are not certain.

It is important to note that the properties in the documentation are written in camel case (e.g., colorScheme), which is the convention in JavaScript. The same property is written with a hyphen in the HTML-tag (e.g., color-scheme), the camel case notation will not be recognized.

Let's now try out how the different values of the button's design property work.

...



<body> 

 <ui5-button>Default</ui5-button>

 <ui5-button design="Emphasized">Emphasized</ui5-button>

 <ui5-button design="Positive">Positive</ui5-button>

 <ui5-button design="Negative">Negative</ui5-button>

 <ui5-button design="Transparent">Transparent</ui5-button>

 <ui5-button design="Attention">Attention</ui5-button>

</body>



...

Listing 4 - Adding buttons with all different design options into the document's body.

This should now display the button in all different designs as shown in the next figure.

Figure 5 - The different button designs shown in the browser.

You can find the source code for this example in the GitHub project design-with-code.

Slots

Some web components allow other components to be placed inside of them by offering so-called slots. The available slots are listed in the documentation. Slots can also have names, which is important if a component offers multiple slots. One of the slots usually is the default slot, and any component placed inside without being assigned to a specific slot will be placed there.

The most basic slot is used for text. The ui5-button for instance takes its label as text inside of the start and end tag: <ui5-button>Label</ui5-button>. This is equivalent to placing a text element in the default slot. This also means that you could also place more complex structures in this slot like the icon on top of the text shown in the figure below.

Figure 6 – Using the default slot of the button to create a button with more complex content.

You can find the source code for this example in the GitHub project design-with-code.

First Application Page

We will now add a page component to our HTML page. You will find the documentation of the page at the bottom of the navigation in the Fiori section, which contains more complex components that are more specific to the design system.

The source code for this example can be found on GitHub in the project design-with-code.

The example shows the final code and not each step in between, so that you can follow the examples here and then compare to the example on the repository.

...

<body style="height: 100%; margin: 0;">

 <ui5-page style="height:100%" background-design="Solid">

  <ui5-bar slot="header" design="Header">

   <ui5-title slot="startContent" level="H4">My App</ui5-title>

  </ui5-bar>

  <ui5-label>Default Content</ui5-label>

  <ui5-bar slot="footer" design="Footer">

   <ui5-button slot="endContent" design="Emphasized">OK</ui5-button>

   <ui5-button slot="endContent" design="Transparent">Cancel</ui5-button>

  </ui5-bar>

 </ui5-page>

</body>

...

Listing 5 - Adding a page with a header and footer bar.

In the listing above we made the following changes:

We added the ui5-page component and set the background to solid.

We want the page to use 100% of the available screen height. To achieve this, we need to set the height of the body and of the ui5-page to 100% using the CSS style attribute. If you don't set the body height, the page will appear empty, because the page will assume a height of 0. If this isn't sufficient, you can try to set the height of the html element to 100% in addition.

Setting the margin to 0 will remove the white border that appears in some browsers.

The ui5-page has three slots. As you see in the example, elements are assigned to slot using the slot attribute:
1. header - here we place a ui5-bar with a ui5-title element as application title. The bar also has slots, and we use the startContent slot to make the title appear on the left.
2. default - this will hold the contents of the app. We just place a label as a placeholder for now.
3. footer - here we place another ui5-bar and move two of our buttons into the endContent slot. The other buttons can be removed again. Following our standards, we use the emphasized button as primary action and the transparent button as the negative path action.

The result should now look like the figure below with a title bar, a footer bar with two buttons and a label in the content area. Layout and style are handled by the component for you.

Figure 7 - The application with the page component, a title, and a footer.

Layout

While the page takes care of the overall page structure, you will have to take care of the layout yourself in order to define the page contents. At this point, you will need to make yourself familiar with some basic layout mechanisms in CSS. In this example, we will use the CSS flex box, which is a very powerful and flexible mechanism that also corresponds closely with the auto layout in Figma as discussed in the second article of this series (Designing with Code (Part 2) – Crossing the Bridge).

We want to create a simple form in our application. As there is no form component, we will make use of the flex box to lay out the form fields.

...



<ui5-panel class="margin-top" header-text="Address" fixed>

 <div class="form">

  <div class="form-element">

   <ui5-label show-colon>Name</ui5-label>

   <div class="text">John Doe</div>

  </div>

  <div class="form-element">

   <ui5-label show-colon>Street</ui5-label>

   <div class="text">Main Street 1</div>

  </div>

  <div class="form-element">

   <ui5-label show-colon>City</ui5-label>

   <div class="text">Big City</div>

  </div>

  <div class="form-element">

   <ui5-label show-colon>ZIP Code</ui5-label>

   <div class="text">12345</div>

  </div>

 </div>

</ui5-panel>

...

Listing 6 - A panel with a form inside, created out of div elements.

We replaced the label in the content area with a panel that contains a form. As there is no form component, we constructed the form from div elements. The class attributes refer to style definitions that were placed in a style element in the header of the page. We are going to discuss them later.

The ui5-panel is used as container for the form. It comes with a header text, and we can disable the collapse feature that is by default enabled by setting the flag fixed, which is equivalent to saying fixed=true.

Inside of the panel we create the structure of the form using div elements. A div is like a frame in Figma and can be used as a container to structure and lay out elements.
1. The outmost div serves as a form container to hold the form elements. We will use the flex layout to arrange the form elements underneath each other.
2. Inside the form, we have several div as form elements that hold a combination of label and field. They will be arranged vertically using a flex box.
3. Inside the form element container, we place a ui5-label where the colon is shown, and another div displaying the text content. As there is no text component available in the web components library, we need to use our own text class apply the proper styles to format the text. In the listing below you can see the CSS classes that we use in order to create the right layout. The measures are taken from the specification of the form. We are also referencing CSS variables that are provided by the library using the var() reference. The components in the library are also styled using these variables that come from the theme definition. It is highly recommended to use theme variables instead of fix values to ensure the styles are always compatible when switching themes. We will discuss this more in detail in a later article. For now, it is enough for you to know that var(--sapFontFamily) refers to the font family defined by the theme.

<head>

...



 <style>

  .margin-top{

   margin-top: 1rem;

  }

        

  .form{

   display:flex; 

   flex-direction: column; 

   gap: 1rem;

  }



  .form-element{

   display:flex; 

   flex-direction: column; 

   gap: 0.25rem;

  }

        

  .text{

   font-family: var(--sapFontFamily);

   font-size: var(--sapFontSize);

   color: var(--sapTextColor);

  }



</style>



</head>

...

Listing 7 - Styles defined for the layout of the form and for the formatting of the text element.

We placed the style definition in a style tag in the header element of the page to be able to reuse classes and to keep the code readable. If you are not familiar with CSS stylesheets, the . in front of the names indicates that this is a class name.

.margin-top defines a margin on top of the panel to separate the panel from the page title bar.

.form defines the form layout as flex box with a vertical arrangement. Between the elements contained in the form layout there is a gap of 1 rem (=16px).

.form-element defines the vertical layout of a label / value pair with a distance between the two of 0.25 rem (=4px).

.text defines the format of the text that displays the value in the form element. There is no text component in the library, so the styles must be applied manually, otherwise the text would be displayed in the browser's default font. As mentioned above, we use the reference to the theme variables to obtain the styles directly from the currently selected theme.

The result should now look like the following figure.

Figure 8 - The application with panel and form as described by the listings above.

If you are struggling with the layout using div elements and flex layouts, I want to quickly show you how this resembles the auto layout feature in Figma:

Figure 9 - Auto layout of the form frame in Figma; in the design view and in the code view.

Above you see the same form layout created with frames and auto layout in Figma. On the top right, you see the auto layout settings in the design perspective and below you see the CSS styles that are generated in the code view. These are the exact same CSS properties that we have defined above (the align-items and align-self property that are generated are redundant as they describe the default behavior). Figma frames are equivalent to div elements, and the auto layout behaves like the flex layout in CSS.

Summary and Outlook

In this article you have learned to create your own simple prototype using SAP Web Components.
As you have seen, setting up such a prototype can be as easy as creating a single HTML page.

A lot of what we have done was just putting together existing components and setting their properties. With that you can already explore and combine existing components, and by adding some basic layout and styling you can take it even a step further.

To create more complex interactive prototypes, you will need to learn how to work with events and how to connect the components to a data model using JavaScript. We will look into these topics in the next article of this series.

Remember, you find all code examples in this series as well as the full text and additional information on the GitHub page for this series: Design with Code.

Designing with Code (Part 4) - Data, Document Object Model, and Events

2023-11-20T08:44:37+01:00

Creating prototypes in code allows designers to gain a deeper understanding of the way user interfaces are constructed. This can help us become more sensitive towards concerns from engineers, but it can also strengthen the designer's position in discussions with development.

In the previous article of this series, we created a first simple static prototype. We created a very simple setup with no installation required, and we added all parts of our simple application in a single HTML file. This allowed us to combine web components and place them into layouts we created using flex layouts.

The important thing about prototypes of course is that the display of components isn’t static, and that we can add interactivity much more easily to it with our design tools.

This article will address the most important aspects that are required to add interactivity. It is helpful if you already have some experience with web technologies, but I will attempt to add sufficient information for everyone to follow.

The following topics are necessary to create interactive prototypes:

Data model: our prototype will display a list of addresses with a flag indicating whether we are allowed to send ads to that address. We will allow the user to change this flag and store this in the data model. To make sure the data is consistent, we will encapsulate the data model in a single class that is used by the application to read and change the data.

Document object model: we will create the table rows dynamically from the list of addresses. For this purpose, we will add, remove, and change elements in the HTML document using the document object model operations.

Events: to make the user interface interactive and react to user input, we must listen to the events initiated by the interface components. If a user for instance clicks a button, the button initiates a click event to which we register a method that is then called on click. Event handling is the basis for making user interfaces interactive.

In this article, we will shed some light on each of these aspects.

All code examples, the full article text, and additional detailed explanations on how to set up the text editor and other topics can be found on the GitHub page for this series: Design with Code.

Application

Let's first look at the application we want to build. We want to create a simple application that displays a list of addresses. Each address will have a flag that indicates whether we are allowed to send ads to that address. When the user selects an address from the list, they will see the address details in a dialog. In this dialog, the flag whether ads are allowed or not will be displayed as a checkbox. The user can change this flag by clicking the checkbox and the change is saved.

Figure 1 - Screen-flow of our simple address application. The application shows a list of addresses. When selecting an entry, the details are shown in a dialog. In the dialog, the user can change the ads flag which will then be saved back into the data model.

As we can see, the application is about displaying and manipulating the address data. The first step therefore will be to define the address data model.

Setup

For the examples in this article, we will create four empty files:

index.html - The main entry point of the application containing the HTML document and the references to the other resources.

style.css - Contains the CSS styles that were in the main document in the styles tag. Putting it in a separate file allows for reuse and better readability.

data.js – The JavaScript file that contains the data structure and all methods to access and modify the data.

index.js – The JavaScript file that controls the lifecycle and interactivity of the application.

The index.html looks almost like the one we created in the previous article. We only remove the form elements from the panel, extract the styles into the style.css, and we add additional references to the related files in the header as shown below. It is important to reference the data.js before the index.js to make sure the data model is available to application logic.

<head>

  ...

  <link rel="stylesheet" href="style.css"/>

  <script src="data.js"></script>

  <script src="index.js"></script>

  ...

</head>

Listing 1 - Links to the related files in the header element of the HTML document.

Data

The data model is the basis for every application. All information displayed in the application and all interaction in the application is related to this data model. It is good practice to encapsulate all functionality used to retrieve or manipulate data in a single class which exists only once in the application.

All examples in this chapter can be found in the GitHub repository on "Design with Code".

As you are starting to work with JavaScript now, you might want to make sure that the right information is processed in your application or you need to identify errors in your code. This process is called debugging and there are various tools built into your browser to support this. Have a look at the article on debugging on the GitHub repository.

Defining the Model

We will now open the data.js to create the data model. In our application, we want to display a list of addresses and a flag showing whether we are allowed to send advertisements to these addresses or not.

{

  id: 1, 

  name:"Anna Arendt", 

  street:"Kleine Strasse 12", 

  city:"Walldorf", 

  zip: "69190", 

  advertisment: true

}

Listing 2 - A single address shown as a JSON structure.

Above, you can see an example of a single address as a JSON structure. Our address list will contain an array of multiple such addresses. JSON stands for Java Script Object Notation and is a way to represent JavaScript objects as a string (serialization) and convert them back into an object (deserialization) again.

To separate the data model from the rest of the application, we are going to create a class that contains all functions to access and modify the data. This class will be instantiated by the application, and the application will only use these functions to access or modify the data to make sure that the data remains consistent and that no invalid changes are applied. We could use these functions to validate or format the changes before writing them into the data structure.

Below, you will find the signature of the AddressList class. The implementation details can be found in the example code.

class AddressList{

  static getInstance()  // Get an instance of the data model AddressList

  getList()             // Get the actual address list as array [ ]     

  getSortedList(ascending) // Get list sorted ascending (true) 

  getAddress(id).       // Retrieve a specific address by id

  addAddress(name, street, city, zip, ads)

                        // Create a new address by providing the required fields

  removeAddress(id).    // Removing an address from the list

  updateAddress(address)  // Change an existing address

}

Listing 3 - Signature of the AddressList class that is used to encapsulate data access.

As you can see above, the AddressList class implements all basic access functions to the data. Apart from that, we don't have to take any care that the data is correct because it is all taken care of by the data model itself. The application can only call these functions and rely on them to work.

Figure 2 - Data model test. To make sure the data model and all accessor methods work properly, it is helpful to include a little test routine. This is the output in Chrome developer tools console.

This is very similar to how data access in backend systems can be wrapped by data access objects. The great thing about this is that the consumer of the data doesn't have to know where the data comes from. The access is always the same through the same interface.

If you create such a data model, it is also helpful to create test cases to see whether the methods work in the way you expect them to. In the example code, you also find multiple test cases in the index.js.

Singleton

To avoid that there are multiple instances of the AddressList in your application, each with different address lists, we use a singleton pattern. Instead of calling the constructor directly with new AddressList(), we use the static AddressList.getInstance() method, which will always return the same instance with the same data, no matter when and from where we call it in the application. You will see examples for this in the test cases.

Copy vs. Reference

You will want to make sure that the data in the model is only accessed via the functions of the data model. Therefore, you must ensure that the data that is given out never contains references to the original variables but only copies. In JavaScript as in other programming languages, there is a difference whether you give access to the variable by handing over the reference to it or whether you create a copy of the data and hand over only that.

In the first example, if you call the function getList() you get a reference to the list. This means that if you change something in the list, it is also changed inside of the AddressList class by passing the accessor functions, making it hard to control which changes are applied when.

class AddressList{

  list = [];          // The list array

	

  getList(){

    return this.list; // Returns a reference to the list

  }

}

Listing 4 - The getList function returns a reference to the list. This allows every consumer to modify the list directly.

Therefore, it is important that we hand over a copy of the original list instead. Now, any change the caller makes on the list only affects their local copy. The spread operator [...array] can be used to copy the values of an array into a new array.

class AddressList{

  list = [];

	

  getList(){

    return [...this.list]; // Returns a copy of the list

  }

}

Listing 5 - The spread operator copies the contents of the list into a new object and create a copy. Then a consumer modifies its copy of the list, this does not affect the original list.

Summary

Above, we have discussed some important aspects of the data model that is used to hold the application data. The application doesn't access this data directly but uses the access functions provided by the model to ensure consistency. By encapsulating all data into a single model, we can also test the access functions and apply corrections in a single place which makes it much easier to maintain.

Now, as we have the data defined, we can take a look at the user interface elements and how they can be handled in the document object model.

Document Object Model

Inside the browser, an HTML document is represented as a hierarchical element structure. All elements displayed in the browser are part of the document body. Each element has different properties that determine their appearance and behavior depending on the type of element. Our web components are part of this structure just as any standard HTML elements (e.g., div). Each element is added as a child of another element, and the parent of all elements is the document's body.

All examples in this chapter can be found in the GitHub repository on "Design with Code".

Setting Element Properties

Inside of the JavaScript code, we can reference elements in the document a function like document.getElementById(id). On this reference we can now access and change all properties this element has.

Let’s assume you have an empty span element in your document.

<span id="myText"></span>

You can get a reference to this element via its id. Then you set the element content via the property innerHTML.

// Get the html element with the id myText

const span = document.getElementById("myText");



// Set the text between the start and element to Hello

span.innerHTML = "Hello";

If you now look at this element in the browser, you will see that the element has been changed containing the text.

<span id="myText">Hello</span>

It is important to know that this doesn't change any file permanently, but just changes the document model at runtime in the browser. If you reload the page, all changes will be gone.

We can use the same mechanism to access the properties of the web components.

<ui5-checkbox id="adsCB" checked="false" text="Allow ads"></ui5-checkbox>

We can now get a reference to this element in our code and set the checkbox to checked.

// Get the checkbox in the html document

const cb = document.getElementById("adsCB");



// Set the checked attribute to true

cb.checked = true;

This way, we can programmatically control all elements on the page and change labels, contents, or functionality as we need it.

Accessing Element Methods

We can also access methods of an element to execute some internal logic. For instance, calling the function myDialog.show() on a reference to a dialog element, will open the dialog overlaying the other contents on the screen. Please note that in JavaScript we access properties and functions using camelCase (e.g., headerText) that is shown in the documentation and not the hyphenated style (e.g., header-text used in HTML).

Adding and Removing Elements

We can't only access existing elements in the document, but we can also create new elements or remove existing elements from the document. We use this to populate a table with the addresses from our data model.

First, let’s create an empty table with the id "addressTable" in our application and define columns for the different data fields.

...

<ui5-table id="addressTable">

  <ui5-table-column slot="columns">Name</ui5-table-column>

  <ui5-table-column slot="columns">Street</ui5-table-column>

  <ui5-table-column slot="columns">City</ui5-table-column>

  <ui5-table-column slot="columns">ZIP</ui5-table-column>

  <ui5-table-column slot="columns">Ads</ui5-table-column>

</ui5-table>

...

When we open this table in the browser, it will be empty and just display the column headers. We could manually create the table rows by adding a ui5-table-row for each address in the address list. But as we want to be able to change the contents, we will create these rows using code.

In the index.js we create the logic that generates the rows. You will find the commented code in the example files.

First, as the document is loaded completely and all static parts of the document are available, the onload event will be triggered. We use this event to initialize our table with the sorted address list.

// When the document is loaded this lifecycle hook is called

onload = () => {



  // We use this to update the data rows in the table.



  // Instead of using the list as is, we use the sorted list

  const sortedList = addressList.getSortedList(true);

  

  // We now call the update function

  updateAddressTable(sortedList);

}

In the updateAddressTable(list) function, we iterate over the list of addresses and add a new row for each address as a child to the table.

// Function to update the table contents

function updateAddressTable(list) {

  // Do some clean up first

  ...



  // Retrieve the table element from the html document

  const table = document.getElementById("addressTable");

  

  // Iterate the list and create a row for each item

  list.forEach((address) => {



    // Call the function that creates the row

    const row = createTableRow(address);

    // Append the row to the table

    table.appendChild(row);

  });

}

New elements are created using the document.createElement(elementName) function. Here, a new ui5-table-row is created for each address.

// Function to create a new table row for an address

function createTableRow(address){



  // Creating the html element with the name ui5-table-row

  const row = document.createElement("ui5-table-row");

  row.id = address.id;  // Set the id

  row.type = "Active";  // Set the active property to be able to trigger events

  ...

  

  // Create the table cells for the address fields

  const nameCell = document.createElement("ui5-table-cell");

  nameCell.innerHTML = address.name; // The cell content is the address name

  

  // Append the cell to the row

  row.appendChild(nameCell);

  ...

  

  // Return the row that has been create to the caller

  return row;

}

Inside of this function we create the ui5-table-cells that contain the actual data. The cells are added as children to the row so that in the end we have created a table row for each address and a table cell for each field within the address.

Figure 3 - The application with a row appended to the address table for each address.

Now, as we begin to generate the UI from the data instead of manually adding table rows, it is not important how many rows we want to display anymore. Also, we can adjust and enhance the way we render our information in one place, and this change will become effective everywhere.

For instance, if we want to display whether ads are allowed or not as a checkbox instead of a string, we just need to adjust the way this cell is rendered in one place, and it will be available everywhere.

// Inside of the create table row function

...



const adsCell = document.createElement("ui5-table-cell");



// Create a check box 

const cb = document.createElement("ui5-checkbox");

cb.checked = address.advertisment; // Is checked if advertiment is true

cb.readonly = true;                // We don't want to change this value

adsCell.appendChild(cb);           // Add the checkbox into the cell



row.appendChild(adsCell);

...

Figure 4 - The flag indicating whether ads are allowed is now displayed as a read-only checkbox.

Shadow DOM

Web components hide their internal structure by placing it in a so-called shadow DOM. This hidden part of the document is protected from access via the document object model, and you normally shouldn’t have to care about it. In some cases, a web component offers access to specific elements of the hidden structure using the parts so that you can apply certain styles. We use this for instance in the style.css to remove the padding from the panel content area for the table.

Summary

We have added logic to our application that generates parts of the user interface based on the data model. This means that we can also adjust the user interface when the data model changes. In the first two parts of this article, we have laid the foundation for an interactive prototype. Now, we need to add event handling to make the prototype interactive by responding to user input.

Events

User interface elements are designed to display data as well as to offer means to interact with the data. Each user interface element has a specific purpose (e.g., button -> initiate action) and according to that purpose offers certain events. Most events are based on user input (e.g., click) but can also be based on system events (e.g., onload).

All examples in this chapter can be found in the GitHub repository on "Design with Code".

If we want a certain function to be initiated by a user input, we must register this function as an event listener in the element. The element will then inform every event listener if the event is triggered.

// Get the button from the document

const btn = document.getElementById("myButton");



// Use the addEventListener method to tell the button which function should

// be called when the user clicks. Here, we use an anonymous function that is

// declared inline. Here, the handleClick function will be called.

btn.addEventListener("click", (event) => handleClick(event));

We have now registered the handleClick() function to be called when the event is caused. The event parameter that is handed to the handleClick() function contains the event context, e.g., what control has caused the event or what row in the table has been clicked. In this example, the event.target property is a reference to the button that initiated the event.

// Function called on click

function handleClick(event){

  const btn = event.target; // getting a reference to the button

}

In many cases, we don't need the information of the event in the event handler function, because the purpose of the function is clear.

Button Event

We could for instance offer a button that switches the form factor between cozy and compact mode.

// Getting a reference to the button element from the document

const formFactorButton = document.getElementById(“formFactorButton”);



// Register an event listener to the buttons click event

formFactorButton.addEventListener(“click”, (e) => toggleFormFactor(e));

// On click, the toggleFormFactor function will be called

As the user clicks the button, the event handler function is called and either sets or removes the ui5-content-density-compact class from the document body element.

// Function holding the functionality to toggle between cozy and compact mode

function toggleFormFactor(e){



  // By adding the content density class to the HTML body, the entire

  // application will be displayed in compact mode (using less space)

  document.body.classList.toggle("ui5-content-density-compact");

}

As we can see in the figure below, the dimensions of some elements are adjusted and optimized for either touch (cozy) or desktop (compact) devices.

Figure 5 - Application switched from cozy to compact form factor.

Table Event

In our address list application, we want to display a dialog with the address details when a user selects a table row. To allow the table row to create an event on click, we need to set the mode to "active", otherwise, we will not receive any events, even if we set an event listener. Then, we add and event listener to the table, which collects the events from all rows.

// Getting a reference to the table

const table = document.getElementById("addressTable");



// Adding an event listener for the row-click event

table.addEventListener("row-click", (e) => showDetails(e));

In this event handler function we then open and populate the data into the details dialog. We use the event context to find out which table row has been selected using the event.detail.row.id. As the row id is the same as the id of the address display in this row, we can get the address from the data model and set the address values in the dialog.

// This function is called when a user clicked a table row

function showDetails(e){

  // Get a reference to the dialog element, which currently still is hidden

  const dialog = document.getElementById("detailsDialog");



  // Get the row id that has been clicked from the event context

  const selectedId = e.detail.row.id;



  // Get the address for the id from the data model

  selectedAddress = AddressList.getInstance().getAddress(selectedId);



  // Set the respective texts and values in the dialog

  ...

    

  dialog.show();

}

Before that, we have already added the dialog to the index.html, so that here we only need to show it.

To complete the functionality of the application, we make sure that when the user closes the dialog, we compare whether they have changed the state of some of the checkboxes and update the data model if this is the case. If the data model has been updated, we also update the table and show a message toast.

Figure 6 - Final application flow where the user can select an address, sees the details, changes the agreement and where changes are applied and confirmed by a message toast.

Summary

With events, our application can now react to user input and is finally interactive. Based on the user input, we can change the user interface and the data model and with that, cover a large part of what an interactive prototype is supposed to do.

Summary and Outlook

This article addressed some of the most important concepts of web-based frontend development:

How to handle data that we want to display in the application. Having a single data model is important to allow for interactivity and user input as the prototype progresses. Initially, if you only want to assemble components to a static prototype, this is not necessary.

How to manipulate the document object model (DOM) of the application, which in the end is just an HTML document. This is important to dynamically create contents or react to user interaction. If you want to construct parts of the prototype based on the data model, like for instance the table we used, this is a very powerful way.

How to make the application interactive by registering event listener methods that run code based on user input like a button click or a table selection. This is crucial to make a prototype interactive and requires both, understanding of the DOM-handling and a data model to work efficiently.

There are other things that you will need as you want to create more and more detailed and powerful prototypes like using stylesheets with CSS and using the theme variables but for now, the most important thing is that you try to get an understanding of these basic concepts that you will need going forward. If it is too overwhelming for a start, just play around with the code you can download from the GitHub repository and apply smaller changes to see what happens. Take your time!

In the previous article of this series, you learned how to set up a simple prototyping environment for SAP web components. In this article, you have learned how you can make an interactive prototype using a data model, the document object model, and event handling to react to user input and programmatically control all elements of your application.

While the articles can't go into all the details, you can find detailed listings and comments in the GitHub repository "Design with Code". You can download the examples from there and run them on your own computer. You can use the examples as a basis for your own prototypes and explorations.

Acquaint yourself more deeply with the SAP Fiori Design Guidelines and the SAP Web Component documentation to get more information about how to design SAP Fiori applications using the web component library. For all the other topics that you need there is plenty of documentation and tutorial guidance available, so that it will be easy for you to find some that best serves your needs. I can recommend the Mozilla Developer Network documentation for every question related to JavaScript and CSS. In many cases, it can also be useful to ask ChatGPT, which can create detailed listings and instructions for your specific questions.

In the upcoming articles, we will describe prototyping with other UI technologies offered by SAP, such as SAPUI5 and SAP Web Components for Angular, and how these frameworks add complexity, but also support to your prototyping efforts. We will also take a look at specific topics related to prototyping and interactivity.

Designing with Code (Part 5) - Team Player

2023-11-26T19:12:55+01:00

This is the fifth part of the article series Designing with Code , which has the goal to make a case for designers to get more deeply involved with prototyping their designs with the actual UI technologies at hand. Getting some hands-on experience is so important to understand what it is that you are designing for. To put it in Chris Connors’ words: “Someone designing a chair wouldn’t attempt it without deep understanding of wood, plastic, steel, how they are made, joined, shaped. Code is no different.”

In the past articles, I presented the first steps using web components including some basics of data handling and interactivity. As already described in the first article, during my fellowship in a product design team, the web components were my door opener into prototyping:

While working on the design for a content-heavy application, I soon got frustrated by the redundant work that was necessary to keep screen flows and variations up to date to reflect changes. Especially the table, which formed the main part of my application (of course 😉 ) was a nightmare for me to handle. Looking for ways to speed things up, I started using web components. After some initial frustration, I became much faster at creating the interactive application using code than any of my design tools. In many cases, the turn-around time from feedback to revised prototype took minutes rather than hours, as often the change had to be applied in a single function rather than in multiple frames or components. That was extremely powerful.

Also, getting a much better feeling of what the design changes meant in terms of UI implementation helped me to better anticipate the questions that inevitably would come from development when starting to work on it.

As I already had a basic understanding of HTML, JavaScript, and CSS, it was much easier for me to integrate web components than learning a complete framework like Angular, React, or even SAPUI5. And this is the actual beauty of web components:

Web components are team players.

They integrate into existing HTML applications effortlessly. You can decide to include individual components or you can build up an entire application using web components as well as anything in between, and you can change your opinion at any time during the process.

Web components are forgiving to sloppy code and lack of architecture; they are just right for every level of proficiency because they let you choose the strictness of the implementation around them.

There is no decision that can’t be revisited along the way, and that’s extremely powerful when you know as little as I did at the time.

Lowering Expectations

And this is one of the most important learnings that I took away from my first time of trial and error:

Being an experienced designer doesn’t mean I am a good UI developer, and that’s okay.

I made a lot of mistakes (and I still do), and I was frustrated by the fact that I was not able to lean on the professional experience I normally can when acting as a designer.

In fact, I was afraid of asking for help because my code was so terrible that I would rather search forever in documentation than ask one of my development colleagues and risk to show them my spaghetti code. But after a while, I noticed that instead of bursting out in laughter, they appreciated my efforts and responded with friendly support. The way our discussions went changed, and I noticed that I started to understand aspects I hadn’t been aware of before.

I was so used to being the design expert with the mandate to fight for the interests of the user that reacting to push back from development already had become a reflex. And that’s not unjustified, because often we demand additional efforts and create complexity from our engineers to make life easier for our users. Challenging development is part of our profession and so is the suspicion: don’t they build it because it’s not feasible or because they don’t want to?

I will never reach the level of our engineering colleagues, but the more I learn, the more I understand. My questions become more targeted, my suggestions become more valuable, and the discussions happen more on eye-level.

I don’t expect ever to become a good UI developer, but I can already tell that I have become a better designer by better understanding the technical side of what we do.

Overdo

Another thing I noticed was that I started bypassing the actual design phase. As it was so easy to iterate on the coded prototype, I hardly opened my design tool anymore. That’s both a risk and an opportunity, since it also opens this perspective to you. Have you ever wondered why an implementation seemed short-sighted and not fitting to the rest? Have you ever seen an implementation where things didn’t fit together?

You just have to overdo it and skip the design phase, et voilá!

Figure 1 – If you don’t find your Figma shortcut anymore you should be concerned. (Image generated by DALL-E-3)

Finding myself stuck in the implementation of my prototype taught me the lesson of how important it is to regularly take a step back and look at my work from a distance. Freeing yourself from the “how can I solve this” mindset and getting into the thought process of “what is needed” again reflects the exact same conversation you usually have with development.

Don’t give up being a designer just because you started enjoying to code.

During the refinement phase, I forced myself into this by regularly updating the design specification, and in that way having to take this more holistic perspective. Describing what I did in code often made me rethink and rework the design and then feed that back in. I also think you shouldn’t open the code editor before you have the first design iteration finished to avoid getting into the solution space right away.

One Step at a Time

An important learning from working my way into the world of coding was that most setup instructions are targeting developers. As a designer who simply wants to create prototypes, I can keep it simple.

Don’t let complex setup get into your way.

Setting up a development environment requires the orchestration of several independent tools and projects into a single development pipeline. A professional developer spends a lot of time on writing test cases, documentation, and so on, and many of the tools are designed to run those tests, control code quality, and detect issues.

Figure 2 – Overview of build tools for HTML and Javascript

In other words, much of this is not relevant when creating design prototypes. Now, the setup instructions for UI libraries such as SAP Web Components are not meant for nosy designers but for developers building products. For many, this already means an insurmountable hurdle.

Same here. Getting access to web components wasn’t as easy as I had hoped. Seeing the potential, I wanted to get started with examples that I took from the web components playground (the old non-storybook version). But I was intimidated by the setup instructions that included things that I had never heard of and of which I didn’t understand the purpose. There are only few things as frustrating as spending hours on setting up and installing things you don’t understand and then not being able to change anything because you don’t understand what you are doing and if things don’t work… see above. Learning how to use something is already hard enough, who wants to spend even more effort on the setup?

I learned to avoid any complexity I couldn’t handle. Instead, it is better to start with the simplest setup possible and then slowly add any additions needed. A proper code editor can save a lot of time with code completion and formatting. I also learned to value GitHub, which took me a long time to understand and use. I still didn’t see a need to go for the full setup recommended for application developers, and I will stay away from it until I understand it and understand why I should use it.

Motivation

Of course, I am passionate about creating business applications, as they hold the hardest design challenges to solve, but many of these challenges are not so much UI challenges rather than process, data, or integration challenges. Solving such challenges is just not as straight forward as fixing the design and can take much more time. In other words, our everyday work as designers often doesn’t give us enough opportunity to spend time working on prototypes and exploring options.

So where can we purposefully practice our skills?

Having meaningful side projects that allow you practicing your skills at your own pace can help a lot. They give you the freedom to try out things without pressure and without limitations. Depending on the type of project, seeing the results of your work immediately and being able to iterate fast can be very rewarding.

For me, this is a home automation application I use to optimize our energy consumption with my family as an extremely critical user group.

Figure 3 – UI for my home automation system built with SAP web components.

Now, in version 7, I have implemented the entire application using our web components library enjoying the capabilities of the components and the polished design in both light and dark mode (charts are created with Grafana).

If you want to get deeper into the different aspects of development, I can only recommend looking for such a side project you can use to motivate and challenge yourself, be it a Raspberry Pi project or building on a smart home platform like OpenHAB, this can easily grow into a time-consuming hobby.

Summary and Outlook

In the first set of articles in this series, I have explained why it might pay off for designers to get a deeper understanding of the UI technologies they use. I have tried to show how modern design tools like Figma already prepare you for this step and how discipline in using components and layout can help bridging the gap. In the last two articles I gave you some help to set up a simple development environment and create a first application using our web components library.

What you have seen is that web components are open and flexible, but at the same time they leave a lot to the developer. Currently, there is very little support regarding layout and even component-internal behaviors, manipulating table contents, for example, requires a lot of scripting. If you want to focus on prototyping certain screen flows and interactions without going too deep on the development side, this can be inefficient.

This is, where a more opinionated framework such as SAPUI5 can be more suitable for you. SAPUI5 is optimized to build SAP Fiori applications and provides a lot of out-of-the-box functionality that takes this burden off your shoulders. Even though it appears extremely intimidating in the beginning, once you have understood how things belong together, you can be much faster with much less effort if you stick with the predefined options. In the next part of this series, which will start after the Holidays, I will introduce SAPUI5 and how it can be easily set up for prototyping.

What's a Great Information Experience for Users?

2023-11-30T05:28:40.605000+01:00

What is information experience?

Information experience helps users learn the software, navigate a website, and find help, so that they have a delightful experience. Or at least one that's not entirely frustrating! User Assistance Developers collaborate with design and development to create a wonderful information experience.

Types of information

Here are a few examples of types of information that you'd typically find in software, help content, or website design.

User interface text

This includes buttons, menus, field labels, messages, and on-screen text, like errors, instructions, and more. In this example, the Display settings in Microsoft Word have texts to help you decide which ones to pick.

User interactions

Interactions are how the user uses or interacts with the software or website - how they navigate, which buttons they select, how they search, etc. In this example, the user is interacting with Microsoft Word to save a file with certain settings. The text on this page guides the user to save the file.

User assistance (aka "help")

Software can have embedded in-app help, help portal and support content, or on-screen text to help users navigate the software. Interactions can have some built-in help, but when a user needs more information, this comes in the form of user assistance (or what the lay people call "help"). How do I add a delegate for my travel expense report? Here's an example of SAP Help Portal content.

Why is a good information experience important?

The goal is to design an intuitive and clear user interface to reduce the need for enormous amounts of documentation and frustration. We all know that a certain amount of help is needed for more complex tasks. For example, setting up a server, or setting user permissions. To ensure a good (or even great!) information experience for our users, we use our professional experience to apply known principles of how users read and consume information. This helps to simplify user tasks, increase productivity, and reduce frustration among users.

Let's check out this example

Imagine you’re driving in your brand-new Acura TL. It’s your first car, and you love how it drives. An icon appears on the dash with a bright orange exclamation mark.

You’re confused, worried, panicked. Is something overheated? Is the engine going to die? Should I pull over? Or should I ignore it and hope for the best?

Maybe if you had a more-detailed icon, like this one, your mind would be more at ease. A minor addition of a text stating that the car requires service at 10,000 miles (or is it kilometers?) adds to the clarity of the message and ensures that the user knows it is important but not urgent.

So what does this mysterious icon actually mean? It's about your tire pressure!! How's this for clarity?

What do User Assistance Developers contribute?

User Assistance Developers collaborate with design and development teams to give users an exceptional and intuitive information experience in the user interface. We apply proven principles of how users read and consume information to simplify user tasks, increase productivity, and reduce frustration. Users rely on this information to complete a task quickly and easily.

Here are a few rules to keep in mind when creating an enjoyable and effective information experience.

Know your users

Determine the type and amount of information users need, depending on their role and what they need to get done (personas).

The Trulia mobile app is for users looking for homes for sale, apartments for rent, and open houses.

Integrate information

Develop and implement information (embedded assistance) into the application as part of the feature, instead of adding it on after the fact. Integrate information in the user interface to help users complete their tasks.

Introduce new features

Show users that there's a new feature and tell them how to use it.

Create content guidelines

Set guidelines for tone, language, terminology, and typography to ensure the information experience is consistent across the application. This improves the user’s ability to scan, read, and understand how to interact with the app.

Create task-based content

Focus on providing the right content for an entire workflow and for each single task. Break multi-part procedures into shorter, manageable individual topics so that users don’t get lost in a sea of steps. Three separate 10-step tasks are easier to follow than a single 30-step task.

Waze mobile app clearly displays the tasks the user wants to do

Provide solutions

Don't just give users a well written error. Tell them what to do. Give them a way out of this problem. Amazon's adorable dogs are a clever way to provide a Page Not Found message. But they also give you a link to get back to Amazon's home page.

The good, the bad, and the ugly

If you're interested in what's NOT a good information experience, here are a few examples. Can you spot what's wrong in these examples?

This error isn't helpful at all. What does this mean? What do I do?

Not useful. And no, it's not OK.

Where do I begin? This interface is so busy, I don't know where to start.

Very wordy, yet totally useless. Get to the point.

Uh-oh doesn't make it cute. It's still an error. Help me resolve it.

Workarounds to bad interface

Sometimes the interface can’t (or won’t) be fixed and someone needs to come up with a solution to decipher car dashboard or laundry symbols. It’s not the best solution, but seems like it works.

Here are two workarounds to bad interface

The iPhone has a new feature where you can use the phone camera to look up car dash symbols and meanings. A cheat sheet to avoid redesigning unclear icons?

Image Source: GoMechanic website.

Create an app so that people can scan obscure icons and symbols and look them up with your iPhone. for example, there's the Laundry Lens app for this purpose. Easier than having more intuitive icons?

Image Source: UX Collective website.

So, what now?

Work with design and development early and often to ensure a wonderful user experience.
Review and influence the user interface and any content the user will see in an application.
Make sure any content the user sees is helpful, accurate, consistent, and helps them complete their task.
Help users by adding on-screen text/help, proper labels, helpful error messages, and introducing new features.
Are the application interactions intuitive? Use the application and complete the tasks yourself. YOU are the first end-user.
Know who your users are. What is their knowledge? What previous knowledge do they have an what tasks do they want to complete.
Help users complete their task and be productive. If the content doesn’t help the user, consider removing or changing it.

Third party system approvals substitution to S4 System through interface

2023-12-14T22:07:28+01:00

Introduction:

The development of this interface will facilitate the entry of delegation values into the standard SAP table HRUS_D2. 3PL system will provide a file that will be sent to SAP nightly utilizing PI for processing. The file will be tab delimited in format and will be placed in be placed in a SAPIN folder: \\saptest\\sapin\erp\\folder

Overview:-

1) 3PL system will provide a file.

2) The file will be tab delimited in format and will be placed in be placed in a SAPIN folder.

3) Path \\saptest\\sapin\\erp\\folder

4) Check conditions. If yes, based on conditions data will be created or updated or modified in HRUS_D2 table. Send log information through email.

5) If no, continue business process.

Step By Step Procedure for Creating Proxy

1.The Proxy Service Interface has to be created by PI consultant from PI side. This will further reflect in ABAP side in T-Code “SPROXY”.

2.Create the Proxy from T-Code “SPROXY”.

3.The Proxy created from PI side will be reflected with following details in SPROXY.
Software Component: Service_1.0_of_erp.com
Namespace: http://erp.com//3PLtoSAPService
Service Interfaces: Service_Async_Out

4. Proxy Name will be available once we generate the Proxy.

To generate proxy we need to right click on Service Interface “Service_Async_Out” for Outbound and click on “Create Proxy”.

5.We need to give the “Package” and “Transport Request” to which the Proxy needs to be saved.

6.Once the proxy is created for a service interface then that Interface will be marked as Green.

7. we can find the Proxy Name when we double click on the generated Service Interface. In this case since the Outbound Proxy was already generated we can find the Proxy name of that.

8 .The objects created when we generate a Proxy is as follows
I. Data Type
ii. Message Type
iii. Proxy Class.

Implement proxy class method

Switch to the Properties tab. Double-click the implementing class. and then double-click the method.

Maintain the implementation of the method.

Purpose: Upload data into HRUS_D2 table(Substituted by User).using below function modules in our interface.

SAP_WAPI_SUBSTITUTE_DELETE
SAP_WAPI_SUBSTITUTE_MAINTAIN
RH_UPDATE_SUBST_LIST_SERVER

Total 3 scenarios are there

Once the file triggers proxy then checking the conditions. Based on conditions data will be created or updated or modified.

Scenario1: If file data not in a table, then it inserts a new record same as in file.

Scenario2: If file data in a table, then it updates existing record same as in file.

Scenario3: Table data not in a file then need to update end date and active with ‘space’.

After file execution sent an email with log information (which email is maintained in ZEMAIL table).

METHOD zclii_service_async_in~service_async_in.

*/ Structure declarations
TYPES: BEGIN OF ty_input,
us_name TYPE xubname,
rep_name TYPE xubname,
begda TYPE begdatum,
endda TYPE enddatum,
reppr TYPE hr_rep_prf,
active TYPE hs_rep_act,
END OF ty_input.
TYPES: BEGIN OF ty_final,
us_name TYPE xubname,
rep_name TYPE xubname,
begda TYPE begdatum,
endda TYPE enddatum,
reppr TYPE hr_rep_prf,
active TYPE hs_rep_act,
message(100) TYPE c,
END OF ty_final.

DATA: substituted_obj TYPE swragent,
substitute TYPE swragent,
sub_beg TYPE swr_substbegin,
sub_end TYPE swr_substend,
sub_pfile TYPE swr_substprof,
sub_act TYPE swr_substactive,
lang TYPE sylangu,
ext_badi TYPE xfeld,
ret_code TYPE sysubrc,
msg_lines TYPE TABLE OF swr_messag,
msg_str TYPE TABLE OF swr_mstruc,
subs_tab TYPE TABLE OF swragent,
date(2) TYPE c,
month(2) TYPE c,
year(4) TYPE c,
lv_datum(8) TYPE c,
lv_dat(8) TYPE c.

*/ Data declarations
DATA:
*/ Internal Tables
lt_input TYPE TABLE OF ty_input,
lt_output TYPE TABLE OF ty_input,
lt_modify TYPE TABLE OF ty_input,
lt_temp TYPE TABLE OF ty_input,
lt_insert TYPE TABLE OF ty_input,
lt_update TYPE TABLE OF ty_input,
lt_updatex TYPE TABLE OF ty_input,
lt_deletex TYPE TABLE OF ty_input,
lt_email_address TYPE ifp_tab_address,
lt_binary_content TYPE solix_tab,
lt_email_body TYPE TABLE OF tline,

*/ Local Reference
lo_email TYPE REF TO zcl_gen_utilities,

*/ Local Structures
ls_output TYPE ty_input,
ls_insert TYPE ty_input,
ls_update TYPE ty_input,
ls_updatex TYPE ty_input,
ls_deletex TYPE ty_input,
ls_email_body TYPE tline,
ls_email_address TYPE ifp_str_address,

*/ Local Variables
lv_string TYPE string,
lv_size TYPE so_obj_len,
lv_subject(50),
lv_enddate TYPE sy-datum,
lv_err TYPE c,
lc_tab TYPE c VALUE cl_bcs_convert=>lc_tab,
lc_crlf TYPE c VALUE cl_bcs_convert=>lc_crlf.

DATA:
subst_tab TYPE STANDARD TABLE OF hrus_d2, "TABLES PARAM
wa_subst_tab LIKE LINE OF subst_tab,
err_tab TYPE STANDARD TABLE OF hrscmperr, "TABLES PARAM
wa_err_tab LIKE LINE OF err_tab.

DATA: lt_final TYPE TABLE OF ty_final,
ls_final TYPE ty_final,
lt_hrus TYPE TABLE OF hrus_d2,
lt_temp TYPE TABLE OF hrus_d2.

*/ Constants Declarations

CONSTANTS: lc_eamt_parameters TYPE string VALUE 'ZEMAIL', "
lc_ricefid_1234 TYPE zparam_name VALUE 'EMAIL1234', "
lc_param_name TYPE zmaptype1 VALUE 'Z1234_EMAIL'. "
"lc_eamt_parameters TYPE string VALUE 'ZEAMT_PARAMETERS', "

REFRESH: lt_input, lt_output, lt_update, gt_insert, lt_updatex,
lt_final, lt_hrus, lt_temp, lt_temp, subst_tab, err_tab, gt_deletex.
CLEAR: ls_final, ls_output, ls_insert, gs_update, ls_updatex, ls_deletex.

IF input-delegation_update_sap IS NOT INITIAL.
MOVE-CORRESPONDING input-delegation_update_sap-record TO lt_input.

LOOP AT lt_input INTO DATA(ls_input).
ls_output-us_name = ls_input-us_name.
ls_output-rep_name = ls_input-rep_name.
ls_output-begda = ls_input-begda.
ls_output-endda = ls_input-endda.
ls_output-reppr = ls_input-reppr.
ls_output-active = ls_input-active.
APPEND ls_output TO lt_output.
CLEAR:ls_output,
ls_input.
ENDLOOP.

LOOP AT lt_output INTO DATA(ls_output) WHERE reppr = '0003'.
month = ls_output-begda+0(2).
date = ls_output-begda+2(2).
year = ls_output-begda+4(4).
CONCATENATE year month date INTO ls_output-begda.

month = ls_output-endda+0(2).
date = ls_output-endda+2(2).
year = ls_output-endda+4(4).
CONCATENATE year month date INTO ls_output-endda.

SELECT SINGLE * FROM hrus_d2 INTO @DATA(ls_hrus) WHERE us_name = @LieneS_output-us_name
AND rep_name = @LieneS_output-rep_name
AND begda = @LieneS_output-begda.
"Case1 File data not in a table then insert a record
IF sy-subrc <> 0 AND ls_hrus IS INITIAL.
MOVE-CORRESPONDING ls_output TO ls_insert.
APPEND ls_insert TO gt_insert.
"Case2 File data in a table then update a record
ELSEIF ls_hrus IS NOT INITIAL.

IF ls_output-endda = ls_hrus-endda. "It triggers Maintain Function module
MOVE-CORRESPONDING ls_output TO gs_update.
APPEND ls_update TO lt_update.
ELSEIF ls_output-endda <> ls_hrus-endda.. "It triggers delete FM and insert a record
MOVE-CORRESPONDING ls_output TO ls_updatex.
APPEND ls_updatex TO lt_updatex.

MOVE-CORRESPONDING ls_output TO ls_deletex.
ls_deletex-endda = ls_hrus-endda. "need
APPEND ls_deletex TO gt_deletex.
ENDIF.

ENDIF.
CLEAR: ls_insert, ls_output, ls_hrus, gs_update, ls_updatex, ls_deletex.
ENDLOOP.

"Case3 Table data not in a file then need to update enddate and active
LOOP AT lt_output INTO DATA(gs_modify).
month = gs_modify-begda+0(2).
date = gs_modify-begda+2(2).
year = gs_modify-begda+4(4).
CONCATENATE year month date INTO gs_modify-begda.

month = gs_modify-endda+0(2).
date = gs_modify-endda+2(2).
year = gs_modify-endda+4(4).
CONCATENATE year month date INTO gs_modify-endda.

APPEND gs_modify TO lt_temp.
CLEAR: gs_modify.
ENDLOOP.

IF lt_temp IS NOT INITIAL.
SELECT * FROM hrus_d2 INTO TABLE lt_temp WHERE reppr = '0003'.

LOOP AT lt_temp INTO DATA(gs_temp).
DELETE lt_temp WHERE us_name = gs_temp-us_name
AND rep_name = gs_temp-rep_name
AND begda = gs_temp-begda.
CLEAR: gs_temp.
ENDLOOP.
lt_hrus = lt_temp.

"Delete the records
LOOP AT lt_temp INTO DATA(ls_temp) WHERE active = 'X'.
substituted_obj-otype = 'US'.
substituted_obj-objid = ls_temp-us_name.

substitute-otype = 'US'.
substitute-objid = ls_temp-rep_name.
APPEND substitute TO subs_tab.

sub_beg = ls_temp-begda.
sub_end = ls_temp-endda.

CALL FUNCTION 'SAP_WAPI_SUBSTITUTE_DELETE'
EXPORTING
substituted_obj = substituted_obj
start_date = sub_beg
end_date = sub_end
delete_without_date = 'X'
lang = sy-langu
ext_badi = ' '
IMPORTING
ret_code = ret_code
TABLES
substitutes = subs_tab
msg_lines = msg_lines
msg_str = msg_str.
CLEAR: ls_temp.
REFRESH: subs_tab.
ENDLOOP.

"Change end date and active with space
LOOP AT lt_hrus INTO ls_hrus.
IF ls_hrus-active = 'X'.
gs_modify-us_name = ls_hrus-us_name.
gs_modify-rep_name = ls_hrus-rep_name.
gs_modify-begda = ls_hrus-begda.
lv_datum = sy-datum.
lv_dat = lv_datum - 1.
year = lv_dat+0(4).
month = lv_dat+4(2).
date = lv_dat+6(2).
CONCATENATE year month date INTO gs_modify-endda. "need to modify
gs_modify-reppr = ls_hrus-reppr.
gs_modify-active = ls_hrus-active.
APPEND gs_modify TO lt_modify.
CLEAR: gs_modify, ls_hrus, lv_dat.
ELSE.
MOVE-CORRESPONDING ls_hrus TO gs_modify.
APPEND gs_modify TO lt_modify.
CLEAR: gs_modify, ls_hrus.
ENDIF.
ENDLOOP.
ENDIF.

LOOP AT lt_deletex INTO ls_deletex.
substituted_obj-otype = 'US'.
substituted_obj-objid = ls_deletex-us_name.
substitute-otype = 'US'.
substitute-objid = ls_deletex-rep_name.
APPEND substitute TO subs_tab.
sub_beg = ls_deletex-begda.
sub_end = ls_deletex-endda.

CALL FUNCTION 'SAP_WAPI_SUBSTITUTE_DELETE'
EXPORTING
substituted_obj = substituted_obj
start_date = sub_beg
end_date = sub_end
delete_without_date = 'X'
lang = sy-langu
ext_badi = ' '
IMPORTING
ret_code = ret_code
TABLES
substitutes = subs_tab
msg_lines = msg_lines
msg_str = msg_str.
CLEAR: ls_deletex.
REFRESH: subs_tab.
ENDLOOP.

"Case1 Create a new record
IF lt_insert IS NOT INITIAL.

LOOP AT lt_insert INTO ls_insert.
substituted_obj-otype = 'US'.
substituted_obj-objid = ls_insert-us_name.
substitute-otype = 'US'.
substitute-objid = ls_insert-rep_name.
sub_beg = ls_insert-begda.
sub_end = ls_insert-endda.
sub_pfile = ls_insert-reppr.
sub_act = ls_insert-active.

CALL FUNCTION 'SAP_WAPI_SUBSTITUTE_MAINTAIN'
EXPORTING
substituted_obj = substituted_obj
substitute = substitute
sub_beg = sub_beg
sub_end = sub_end
sub_pfile = sub_pfile
sub_act = sub_act
lang = sy-langu
ext_badi = ' '
IMPORTING
ret_code = ret_code
TABLES
msg_lines = msg_lines
msg_str = msg_str.

IF ret_code = 0.
ls_final-us_name = ls_insert-us_name.
ls_final-rep_name = ls_insert-rep_name.
ls_final-begda = ls_insert-begda.
ls_final-endda = ls_insert-endda.
ls_final-reppr = ls_insert-reppr.
ls_final-active = ls_insert-active.
ls_final-message = 'Create a new record'.
APPEND ls_final TO lt_final.
ELSE.
ls_final-us_name = ls_insert-us_name.
ls_final-rep_name = ls_insert-rep_name.
ls_final-begda = ls_insert-begda.
ls_final-endda = ls_insert-endda.
ls_final-reppr = ls_insert-reppr.
ls_final-active = ls_insert-active.
ls_final-message = 'Record is already existed'.
APPEND ls_final TO lt_final.
ENDIF.

CLEAR: ls_insert, ls_final.
ENDLOOP.
ENDIF.
"Case2 Update a existing record
IF lt_update IS NOT INITIAL. "It triggers update a existing record
LOOP AT lt_update INTO gs_update.
substituted_obj-otype = 'US'.
substituted_obj-objid = gs_update-us_name.
substitute-otype = 'US'.
substitute-objid = gs_update-rep_name.
sub_beg = gs_update-begda.
sub_end = gs_update-endda.
sub_pfile = gs_update-reppr.
sub_act = gs_update-active.

CALL FUNCTION 'SAP_WAPI_SUBSTITUTE_MAINTAIN'
EXPORTING
substituted_obj = substituted_obj
substitute = substitute
sub_beg = sub_beg
sub_end = sub_end
sub_pfile = sub_pfile
sub_act = sub_act
lang = sy-langu
ext_badi = ' '
IMPORTING
ret_code = ret_code
TABLES
msg_lines = msg_lines
msg_str = msg_str.

IF ret_code = 0.
ls_final-us_name = gs_update-us_name.
ls_final-rep_name = gs_update-rep_name.
ls_final-begda = gs_update-begda.
ls_final-endda = gs_update-endda.
ls_final-reppr = gs_update-reppr.
ls_final-active = gs_update-active.
ls_final-message = 'Modified Existing Record'.
APPEND ls_final TO lt_final.
ELSE.
ls_final-us_name = gs_update-us_name.
ls_final-rep_name = gs_update-rep_name.
ls_final-begda = gs_update-begda.
ls_final-endda = gs_update-endda.
ls_final-reppr = gs_update-reppr.
ls_final-active = gs_update-active.
ls_final-message = 'Record is already existed'.
APPEND ls_final TO lt_final.
ENDIF.

CLEAR: gs_update, ls_final.
ENDLOOP.
ENDIF.

IF lt_updatex IS NOT INITIAL. "It triggers delete FM and insert a new record

LOOP AT lt_updatex INTO ls_updatex.
wa_subst_tab-us_name = ls_updatex-us_name.
wa_subst_tab-rep_name = ls_updatex-rep_name.
wa_subst_tab-begda = ls_updatex-begda.
wa_subst_tab-endda = ls_updatex-endda.
wa_subst_tab-reppr = ls_updatex-reppr.
wa_subst_tab-active = ls_updatex-active.
APPEND wa_subst_tab TO subst_tab.

CALL FUNCTION 'RH_UPDATE_SUBST_LIST_SERVER'
TABLES
subst_tab = subst_tab
err_tab = err_tab
EXCEPTIONS
no_wf_plvar = 1
. " RH_UPDATE_SUBST_LIST_SERVER

IF sy-subrc EQ 0.
"All OK
ELSEIF sy-subrc EQ 1. "Exception
"Add code for exception here
ENDIF.
CALL FUNCTION 'BAPI_TRANSACTION_COMMIT'
EXPORTING
wait = '1'
* IMPORTING
* RETURN =
.
WAIT UP TO 1 SECONDS.
IF sy-subrc = 0.
ls_final-us_name = ls_updatex-us_name.
ls_final-rep_name = ls_updatex-rep_name.
ls_final-begda = ls_updatex-begda.
ls_final-endda = ls_updatex-endda.
ls_final-reppr = ls_updatex-reppr.
ls_final-active = ls_updatex-active.
ls_final-message = 'Modified Existing Record'.
APPEND ls_final TO lt_final.
ELSE.
ls_final-us_name = ls_updatex-us_name.
ls_final-rep_name = ls_updatex-rep_name.
ls_final-begda = ls_updatex-begda.
ls_final-endda = ls_updatex-endda.
ls_final-reppr = ls_updatex-reppr.
ls_final-active = ls_updatex-active.
ls_final-message = 'Record is already existed'.
APPEND ls_final TO lt_final.
ENDIF.
CLEAR: ls_final, ls_updatex, wa_subst_tab.
REFRESH: subst_tab.
ENDLOOP.

ENDIF.
"Case3 modify a existing record
IF lt_modify IS NOT INITIAL.
LOOP AT lt_modify INTO gs_modify WHERE active = 'X'.
wa_subst_tab-us_name = gs_modify-us_name.
wa_subst_tab-rep_name = gs_modify-rep_name.
wa_subst_tab-begda = gs_modify-begda.
wa_subst_tab-endda = gs_modify-endda.
wa_subst_tab-reppr = gs_modify-reppr.
wa_subst_tab-active = ''.
APPEND wa_subst_tab TO subst_tab.
CALL FUNCTION 'RH_UPDATE_SUBST_LIST_SERVER'
TABLES
subst_tab = subst_tab
err_tab = err_tab
EXCEPTIONS
no_wf_plvar = 1
. " RH_UPDATE_SUBST_LIST_SERVER

IF sy-subrc EQ 0.
"All OK
ELSEIF sy-subrc EQ 1. "Exception
"Add code for exception here
ENDIF.
CALL FUNCTION 'BAPI_TRANSACTION_COMMIT'
EXPORTING
wait = '1'
* IMPORTING
* RETURN =
.
WAIT UP TO 1 SECONDS.
IF sy-subrc = 0.
ls_final-us_name = gs_modify-us_name.
ls_final-rep_name = gs_modify-rep_name.
ls_final-begda = gs_modify-begda.
ls_final-endda = gs_modify-endda.
ls_final-reppr = gs_modify-reppr.
ls_final-active = ''.
ls_final-message = 'Modified Existing Record'.
APPEND ls_final TO lt_final.
ELSE.
ls_final-us_name = gs_modify-us_name.
ls_final-rep_name = gs_modify-rep_name.
ls_final-begda = gs_modify-begda.
ls_final-endda = gs_modify-endda.
ls_final-reppr = gs_modify-reppr.
ls_final-active = ''.
ls_final-message = 'Record is already existed'.
APPEND ls_final TO lt_final.
ENDIF.

CLEAR: gs_modify, ls_final, wa_subst_tab.
REFRESH: subst_tab.
ENDLOOP.
"table data not in a file then need to update end date and active with ‘space’.
LOOP AT lt_modify INTO gs_modify WHERE active = ''.
ls_final-us_name = gs_modify-us_name.
ls_final-rep_name = gs_modify-rep_name.
ls_final-begda = gs_modify-begda.
ls_final-endda = gs_modify-endda.
ls_final-reppr = gs_modify-reppr.
ls_final-active = ''.
ls_final-message = 'Activate with set to space'.
APPEND ls_final TO lt_final.
CLEAR: gs_modify, ls_final.
ENDLOOP.

ENDIF.

*/Sending email notification

IF lt_final IS NOT INITIAL. "Email

CREATE OBJECT lo_email.

lv_string = lv_string &&
'User Name'(012) && lc_tab &&
'User Name'(013) && lc_tab &&
'Start Date'(014) && lc_tab &&
'End Date'(015) && lc_tab &&
'Substitute Profile'(016) && lc_tab &&
'Substitution Active'(017) && lc_tab &&
'Message'(018) && lc_crlf.

LOOP AT lt_final ASSIGNING FIELD-SYMBOL(<fs_output>).

lv_string = lv_string &&
<fs_output>-us_name && lc_tab &&
<fs_output>-rep_name && lc_tab &&
<fs_output>-begda && lc_tab &&
<fs_output>-endda && lc_tab &&
<fs_output>-reppr && lc_tab &&
<fs_output>-active && lc_tab &&
<fs_output>-message && lc_crlf .

ENDLOOP.

ls_email_body-tdline = 'Hi'.
APPEND ls_email_body TO lt_email_body.
CLEAR ls_email_body.

ls_email_body-tdline = ''.
APPEND ls_email_body TO lt_email_body.
CLEAR ls_email_body.

ls_email_body-tdline = ''.
APPEND ls_email_body TO lt_email_body.
CLEAR ls_email_body.

ls_email_body-tdline = 'Pleae see the attached file for the 3PL Substitution to S4'.
APPEND ls_email_body TO lt_email_body.
CLEAR ls_email_body.

ls_email_body-tdline = 'Can you please check the records'.
APPEND ls_email_body TO lt_email_body.
CLEAR ls_email_body.

ls_email_body-tdline = ''.
APPEND ls_email_body TO lt_email_body.
CLEAR ls_email_body.

ls_email_body-tdline = ''.
APPEND ls_email_body TO lt_email_body.
CLEAR ls_email_body.

ls_email_body-tdline = 'Thank you'.
APPEND ls_email_body TO lt_email_body.
CLEAR ls_email_body.

* Convert the inernal table data into binary format.
IF lv_string IS NOT INITIAL.
lo_email->create_excel_content( EXPORTING
email_data = lv_string
IMPORTING
binary_content = lt_binary_content
size = lv_size ).
ENDIF.

* Append all the emails
DATA(l_util) = NEW zcl_gen_utilities( ).
l_util->read_parameters_table( EXPORTING table = lc_eamt_parameters
name = lc_ricefid_1234
maptype1 = lc_param_name
IMPORTING data = DATA(lt_param_tab) ).

CLEAR lt_email_address.

LOOP AT lt_param_tab INTO DATA(lw_param_tab).
CLEAR ls_email_address.
ls_email_address-address = lw_param_tab-param1.
APPEND ls_email_address TO lt_email_address.
CLEAR ls_email_address.
ENDLOOP.

CLEAR lv_subject.
lv_subject = '3PL Substitution to S4'.

IF lt_email_address IS NOT INITIAL.

lo_email->send_email_with_xls_attachment( EXPORTING
subject = lv_subject
email_address = lt_email_address
binary_content = lt_binary_content
size = lv_size
email_body_tab = lt_email_body ).

ENDIF.
ENDIF. "Email

ENDIF.

ENDMETHOD.

Introducing OpenUI5 2.x

2023-12-21T13:06:14+01:00

Update 13.3.2024: On tool support for adapting an app, see a new blog post 'Introducing UI5 linter'

Where is OpenUI5 today?

OpenUI5 is SAP’s open-source Web UI framework, supporting the SAP Fiori design system for products. It celebrates its 10th anniversary, with many highlights that have shaped an incredible developer community. OpenUI5 will continue to innovate, ensuring a consistent and modern user experience for web applications.

The size of OpenUI5 grew with its capabilities, with its APIs and with its number of controls, especially as old features were not removed for compatibility reasons, to stay upgrade compatible. This compatibility is a challenge in Web development: Web development standards evolve, new security gaps continuously appear and need to be closed, Web browsers evolve and have new features to take advantage of (e.g. for better performance). Therefore, it is not an option for modern UI technologies to rest on a status quo. As many developers rely on a stable and secure UI technology, OpenUI5 needs to innovate in time to stay competitive and future proof in this dynamic environment. On the other hand, the evolution of Web technologies also brings great value and opportunities to innovate, both for developers and well as with an improved and faster user experience for business users.

The next step: OpenUI5 2.x

To be able to continue with this successful journey, we need to make sure that:

UIs are staying interactive with less code to be loaded and by avoiding synchronous JavaScript.

Security can be ensured with the strict Content Security Policy (CSP).

Development of OpenUI5 framework as well as application developers remain efficient.

Applications are compliant with the evolution of browsers (and restrictions they introduce).

For this the UI5 team needs to remove non-compliant, deprecated libraries and functionality from the OpenUI5 framework. In doing so, we need to find the right balance between upgrade stability and agility for innovations.

OpenUI5 2.x is renewing OpenUI5
by removing everything not required to comply with OpenUI5 best practices.

The value of OpenUI5 2.x

OpenUI5 2.x allows to evolve in these areas:

Security: OpenUI5 2.x enforces an improved security with strict Content Security Policy (CSP).

Smooth UI performance: OpenUI5 2.x assists with an improved UI performance by using fine granular tasks and asynchronous JavaScript only.

General performance: With the modular core, new bootstrap and additional opportunities to improve performance we expect to see a better experience when launching and using OpenUI5 apps.

Micro frontends: The removal of Globals simplifies the orchestration of micro frontends.

App development: With streamlined APIs application developers learn and develop with OpenUI5 more easily.

Best practices: OpenUI5 2.x means less effort for application developers to follow OpenUI5 best practices.

Browser: OpenUI5 2.x makes it easier to stay up to date with the browser evolution.

Web standards: OpenUI5 2.x enables a simple adoption of latest Web standards, e.g. CSS custom properties.

Pace of innovation: It becomes easier for the UI5 team as well as for application developers to make progress. At the same time, less resources are needed for maintenance, shifting the focus towards innovative, yet stable capabilities.

Recommendation for moving from OpenUI5 1.x to 2.x

Follow the latest Best Practices for App Developers of OpenUI5 1.x
Applications following these best practices will run smoothly with OpenUI5 2.x, no migration effort needed.

Call to Action

The UI5 team now offers a first version of OpenUI5 2.x https://sdk.openui5.org/nightly/2/index.html for testing purposes (Disclaimer: This is a version with daily updates, possible API changes and temporary bugs.)

Make yourself familiar with the Best Practices. (Updated instructions will follow.)
Review your application code, e.g. by removing of any usage of deprecated APIs. Test your custom OpenUI5 apps for OpenUI5 2.x compatibility by simply pointing the bootstrap to https://sdk.openui5.org/nightly/2/resources/sap-ui-core.js

The team continues working on OpenUI5 2.x and the best practices for application development. To support the process of moving an app from 1.x to 2.x. the UI5 team is currently looking into which documentation and tool support can help with the manual migration of custom code.

Your feedback is highly appreciated: Please add feedback to GitHub by reporting an issue at https://github.com/SAP/openui5/issues/new and prefix the title with "[UI5 2.x]".

Design Systems: The Heart of SAP's User Experience

2024-01-04T01:41:59+01:00

Much like an artist's signature touch on their masterpiece, design systems lend a distinctive voice to products, making them immediately recognizable. It's this consistency, both visually and functionally, that drives memorable user experiences. This is where SAP's Fiori design system shines, serving as a beacon of familiarity and trust across our diverse range of products.

Typical Fiori Object Page Screen

Fiori stands as a testament to SAP's dedication to clean, efficient, and intuitive design. It's not just about following a set of rules; it's about embracing a philosophy that places the user at the heart of the software experience. Fiori's language, with its minimalist aesthetics and responsive layouts, goes beyond visuals; it's about crafting an intuitive user journey.

A Guide to Using Fiori Design Guidelines

Before delving deeper into the essence of Fiori, let's explore some practical insights that could enhance your design process:

Start with Layout and Floorplan:

Begin by mapping out your screens at a high level. Use the Fiori design guidelines to determine the best layout and floorplan for your specific task.

Self-Check for Flow:

Assess the user flow across screens. A disjointed flow indicates gaps in UI Architecture that need addressing.

Content Building Blocks:

After establishing your floorplan, choose the right compound elements like tables, forms, and containers. The guidelines can help you select the most suitable components for your needs.

Attention to Detail:

Finally, focus on the finer details like button types, input selections, and other elements. Refer back to the guidelines to inform these choices.

Remember, structured thinking can significantly streamline your design process. Avoid diving into specifics too early and maintain focus on the overall user journey.

Reflective Questions

In our SAP universe, Fiori is the constant star. It’s our promise of a familiar, intuitive user experience across all SAP products. This isn't just about maintaining visual cohesion; it's about delivering predictable, reliable functionality that users can count on.

An app's visual identity – from its button placements, color scheme, to its typography – often becomes its signature. It's these meticulous design choices, informed by a robust design system, that make products instantly identifiable. It's akin to recognizing a song from its first few notes.

But mastery of a design system is a journey. Even after nearly a decade of immersion in Fiori designs, I still find myself revisiting guidelines, seeking clarity, and striving for perfection. This journey is both challenging and rewarding, as it ensures that our products not only look like they belong to the SAP family but also function with the excellence our users expect.

Navigating Fiori's complexities is a team effort. In our experience, a collaborative approach has been instrumental in upholding Fiori's high standards. By leveraging collective knowledge and perspectives, we ensure that every Fiori application we deliver is not just a solitary piece of software, but part of a larger, cohesive user experience.

In the tech space, evolution is a given. SAP's commitment to staying ahead of the curve means our design systems, though mature, are always in flux.

For every designer or developer: if the term "Fiori app" resonates with your creation, delve deep into the guidelines. Consistency is Fiori's hallmark. Embrace it, and every app you craft will echo SAP's commitment to excellence. Dive deeper into our design system and discover the potential.

But don't stop there. Join the SAP design community and contribute to the evolving Fiori landscape. Share your experiences, seek feedback, and be part of the continuous dialogue that shapes our products. Your voice is vital in crafting a user experience that not only meets but exceeds expectations.

Explore more about Fiori and its intricacies, and join us in shaping the future of SAP's user experience.

Create CBO (Custom Business Object) Tile using BAS in SAP UI5

2024-01-08T09:14:55+01:00

Hello,

In this blog we will learn How to create CBO Tile (Custom Business Object Tile ) with BAS , also learn about fiori app tile creation in launchpad designer, and Git.

What is CBO ?

CBO (Custom Business Object) is a SAP ui5 fiori application in which we can define the custom business object as per the requirement.

Custom business objects can be accessed from outside SAP S/4HANA via an automatically generated OData service. You can use this app to create custom business objects and to generate database tables, services, UIs, and applications based on custom business objects. The fields can be used as table columns on the initial page of a custom application that you create based on a custom business object.

What we can do in Custom Business Object:

Create your own business objects and the corresponding database tables

Copy already published custom business objects

Add fields to business objects

Generate UIs based on custom business objects

Create associations between custom business objects for reuse

Track changes in a custom business object with change documents

Generate OData services for custom business objects to work with and modify custom business objects from externally

Publish business objects

Edit business objects that have already been published

Create multiple sub nodes for one business object

Implement custom logic on node level

Reset business objects to their last published version

Delete custom business objects that have not yet been transported to your production system

Refer to custom libraries and custom code lists

Steps to create CBO tile in SAP BAS :
1. Launch the SAP Business Application Studio from the Cloud Cockpit

2. To create a Tile, select new Project from Template. --> Select Template and Target location.

Select the worklist type template.

3. Select the Data source, system and OData service.

4. Select the Entityset (Main Entity) and Navigation Entity (Navigation Entity: When you click on the table row, it will navigate to another page, where you can see the information of the selected row.)

5. Provide the required information for Project attributes and finish.

6. Run the Fiori app using command: npm run start

7. Deploy the CBO Tile :

To deploy the CBO Tile follow the below attached sap blog.

https://blogs.sap.com/2023/02/24/deploy-the-ui5-fiori-app-on-sap-abap-repository-with-bas-webide-create-fiori-app-tile-using-launchpad-designer/

8. how to create git repository and push the code on GIT.

8.1. Login your account

8.2. Click on New Project and select Blank Project.

8.3. To upload the Ui5 project follow the below steps.

9. Steps to create a Tile and Target mapping in Fiori launchpad Designer

https://blogs.sap.com/2023/02/24/deploy-the-ui5-fiori-app-on-sap-abap-repository-with-bas-webide-create-fiori-app-tile-using-launchpad-designer/

To learn more about the CBO, read below attached Links.

https://blogs.sap.com/2023/02/24/deploy-the-ui5-fiori-app-on-sap-abap-repository-with-bas-webide-create-fiori-app-tile-using-launchpad-designer/

https://blogs.sap.com/2019/06/24/fiori-elements-object-page-table-items-context-based-edit-ability/

https://help.sap.com/docs/SAP_EXTENSIBILITY_EXPLORER/b0e8d558ba2f47f5b02a3fc0ac9edc34/6bd534db33694eba9ddde788ef717dfd.html?locale=en-US&state=PRODUCTION&version=SHIP&q=Custom%20Business%20object

https://help.sap.com/docs/SAP_S4HANA_CLOUD/0f69f8fb28ac4bf48d2b57b9637e81fa/b45696ca0d9143cba040797e9c71aa44.html?locale=en-US&state=PRODUCTION&version=2308.504&q=Custom%20Business%20object

Conclusion

The Custom business application tile has been created using Fiori. The Fiori app tile has been created on Fiori Launchpad.

With this we come to an end of this blog. Hope you find it useful.

Keep learning & Keep Sharing!!

Team FPM How to render an FPM Overview Page to look like a SAP Fiori Object Page

2024-01-10T10:39:20+01:00

Dear SAP Community,

Today, I will demonstrate how you can render an Overview Page (OVP) Floorplan to look like a SAP Fiori Object Page Floorplan. If you have a new or existing FPM application based on the OVP floorplan, it can be rendered to appear as one based on the SAP Fiori Object Page floorplan.

The new Floorplan Modes

With SAP_UI 758 (ABAP Platform 2023) and SAP_BASIS 7.94 (S/4H Cloud 2308), the OVP offers multiple modes of an Object Page floorplan, which can be used to control its appearance, functionality, and behavior. The mode of the OVP can be specified by using the URL or application parameter FPM_FLOORPLAN_MODE or at the configuration level, using the FPM configuration editor, FLUID (screen area General Settings > dropdown list box Floorplan Mode).

The modes for the FPM Floorplan Mode are as follows:

< (Space)>	Classic Mode (default)
OA1	Object Page With 1-Level Anchor Bar Navigation
OA1P	Object Page With 1-Level Anchor Bar Navigation (Power User)
OA2	Object Page With 2-Level Anchor Bar Navigation
OA2P	Object Page With 2-Level Anchor Bar Navigation (Power User)
OT1	Object Page With 1-Level Tab Bar Navigation
OT1P	Object Page With 1-Level Tab Bar Navigation (Power User)
OT2	Object Page With 2-Level Tab Bar Navigation
OT2P	Object Page With 2-Level Tab Bar Navigation (Power User)

In Figure 1, I have taken demo application S_EPM_FPM_PO and Floorplan Mode OA1 to demonstrate the necessary adaptations, for instance, on the customizing level

Figure 1: Changing the Floorplan Mode of OVP component configuration S_EPM_UX_PO_OVP

In addition, I have added the title Result List on the Initial Page for the List UIBB EPM_PO_OVP_SEARCH_LIST_CFG, see Figure 2. In Floorplan Mode OA1, the respective UIBB titles are displayed above the UIBBs and in the anchor bar.

Figure 2: Adding a title for the result list on the Search Page

Dynamic Page Header

The above adjustments enable the page header areas to automatically collapse or expand as you scroll down or up, as illustrated in Figure 3. Conversely, the header toolbar maintains a fixed position.

Figure 3: Floorplan Mode OA1 - Search Page of EPM Purchase Order Application showing the expanded and collapsed page header

Navigation Bar

The anchor bar and the tab bar are variants of the navigation bar in the OVP header. They have distinct differences in terms of the UIBBs displayed and navigation functionality. For example, in Floorplan Mode OA1 the anchor bar represents the UIBBs of the current page and the respective UIBB titles are displayed in the anchor bar (see Figure 4), while a tab bar represents the sections of the current page and the section titles are displayed in the tab bar.

Figure 4: Main page of EPM Purchase Order Application showing the new anchor bar of Floorplan Mode OA1

Additional Remarks

Some features of the OVP floorplan may behave differently when rendered in Object Page modes. These differences may impact aspects such as the header, UIBB selector UI control, page master splitter UI control, UIBB height, section column resizing, sections and UIBB stacking, UIBB stacking, panels, drag-and-drop of UIBBs, panels and panel stacks, UIBB collapse/expand, and personalization. However, the Power User Modes allow you to override some of the constraints imposed by Object Page rendering. You can enable drag-and-drop for moving UIBBs, panels, and panel stacks around the UI. You can also expand and collapse UIBBs.

Stay tuned for more insights and updates 😉 Happy coding!

Getting Familiar with Spaces and Pages in SAP S/4HANA Cloud Public Edition

2024-01-12T11:20:20+01:00

Happy New Year 2024! To start off the year right, I'd like to remind you to switch from groups to spaces and pages, our go-to approach for visualization and layout in the SAP Fiori launchpad.

Why switch to spaces and pages? The groups setup on the SAP Fiori launchpad is officially outdated with the SAP S/4HANA Cloud Public Edition 2402 release. Get ready for the next release and switch to spaces and pages now! Please note that the switch is mandatory and has to be done manually.

In the meantime, watch the videos below to get familiar with spaces and pages and the new My Home in SAP S/4HANA Cloud Public Edition:

Switching from Groups to Spaces and Pages

SAP introduced spaces and pages in SAP S/4HANA Cloud Public Edition in Q2/2020 already, accompanied by the announcement to deprecate the group-based visualization.

Click on the image below to watch the video:

Read more on how to switch from groups to spaces and pages in my blog post.

Using Predefined Spaces Out-of-the-Box

With SAP S/4HANA Cloud Public Edition 2302, SAP introduced the option to use predefined spaces and pages out-of-the-box. The benefits here are clear: Fast implementation without the need of investing time and resources in designing own spaces and pages. Direct consumption of SAP enhancements to predefined spaces and pages with an upgrade.

Click on the image below to watch the video:

Importing Personalized Groups

Learn how to work with the new My Home in SAP S/4HANA Cloud Public Edition. Import your personalized groups from the classic home page, customize your favorite apps, and stay organized with spaces and pages.

Click on the image below to watch the video:

Using the Navigation Bar

Learn how to easily arrange your spaces in the new My Home in SAP S/4HANA Cloud Public Edition according to your needs and preferences. Optimize your workflow by pinning and rearranging spaces.

Click on the image below to watch the video:

Personalizing the Page

Learn how to personalize your pages in SAP S/4HANA Cloud Public Edition. Easily customize your favorite pages and arrange them according to your preferences.

Click on the image below to watch the video:

Other SAP S/4HANA Cloud Enablement Assets

SAP S/4HANA Cloud is the foundation of the intelligent enterprise and is an innovative, robust, and scalable ERP. We at Cloud ERP Product Success and Cloud Co-Innovation offer a service as versatile as our product itself. Click on the image below to check out the numerous offerings our Enablement team has created for you:

Inside SAP S/4HANA Podcast

Subscribe to our podcast “Inside SAP S/4HANA“! This podcast leverages the unique knowledge and expertise of SAP S/4HANA Cloud product experts, partners and customers to address objects of interest by sharing product insights and project best practice. There is no customer success without product success and project success; we share all ingredients with you to get to the next level and make your SAP S/4HANA Cloud, public edition project a success. Subscribe now and benefit from the shared knowledge.

openSAP Microlearnings for SAP S/4HANA Cloud

Our openSAP microlearnings for SAP S/4HANA Cloud offer an exciting new learning opportunity. What began with a small batch of 20 videos, has now become a channel with more than 50 microlearnings that have generated over 20,000 views. Today we cover multiple lines of business such as finance, manufacturing, and supply chain management, and key technology topics like Master Data Management, extensibility, SAP User Experience, and upgrade management. We are continuously adding new microlearnings to the SAP S/4HANA Cloud channel, so make sure you check them out.

Your Voice Matters!

If you want to learn more and actively engage with SAP subject matter experts on SAP S/4HANA Cloud, public edition, join our SAP S/4HANA Cloud Public Edition topic page on SAP Community. The community brings together customers, partners, and SAP experts and has a clear mission: deliver an interactive community to engage with one another about best practices and product solutions. We invite you to explore our ‘one-stop shop’ as the central place for all resources, tools, content questions, answers and connect with experts to guide you through your journey to SAP S/4HANA Cloud Public Edition.

More Information:

SAP User Experience in SAP S/4HANA Cloud Public Edition 2308

Deactivation of Groups in the SAP Fiori Launchpad in SAP S/4HANA Cloud Public Edition: Switching to Spaces and Pages Mandatory

Upcoming SAP User Experience Live Session

SAP S/4HANA Cloud Public Edition Release Info

Release Blog Posts

YouTube Playlist for SAP S/4HANA Cloud Public Edition

SAP S/4HANA PSCC Digital Enablement Wheel

Inside SAP S/4HANA Podcast

openSAP Microlearnings for SAP S/4HANA Cloud

Best Practices for SAP S/4HANA Cloud Public Edition

SAP Community

Feature Scope Description

What’s New

Help Portal Product Page

Team FPM ABAP Push Channel for FPM Events - Enhancing the user experience with a delivery type

2024-01-12T15:12:19+01:00

Dear SAP Community,

our team continues to provide new features to enhance user experience and productivity. One such improvement is introduced with SAP Note 3406803, available from SAP_UI 757, which focuses on the FPM ABAP Push Channel for Events and the new delivery type Do Not Disturb Receiver. In this blog post, I will demonstrate how this new feature empowers application developers to prevent immediate roundtrips on the application user interface, thus improving the overall user experience.

When users interact with an application, they may place the cursor in an input field to provide input or make changes, for instance, in a filter bar. As a result, any event triggered via ABAP Push Channel during this time would result in an immediate roundtrip on the user interface, interrupting the user's workflow. This interruption can be frustrating and hinder efficiency, therefore we addressed this problem by introducing a new parameter, IV_DELIVERY_TYPE, in the method SEND of class CL_FPM_CHANNEL_MANAGER, respectively interface IF_FPM_CHANNEL_MANAGER.

The parameter IV_DELIVERY_TYPE can have two kind of values:

0	IF_FPM_CHANNEL_MANAGER=>GC_DELIVERY_TYPE-STANDARD (default)
1	IF_FPM_CHANNEL_MANAGER=>GC_DELIVERY_TYPE-DO_NOT_DISTURB_RECEIVER

In addition, we have prepared test application FPM_TEST_APC_OVP such that you can try the new feature right after implementing SAP Note 3406803, see Figure 1.

Figure 1: Test application FPM_TEST_APC_OVP showing a filterbar, result list and chart

By running ABAP report FPM_APC_MULTIPLE_TEST you will trigger fifty FPM events, for instance, with ID FPM_REFRESH and further defined properties, see Figure 2. When using the new delivery type, the application ensures a smooth and uninterrupted user experience. You can continue your work without unnecessary interruptions caused by events triggered during input field interactions. In the meantime, the events are queued on the client, and are forwarded to the ABAP backend once you leave the input field or trigger any roundtrip on the user interface, e.g. by pressing the button "Go" in the test application.

Figure 2: Initial Screen of ABAP Report FPM_APC_MULTIPLE_TEST

One final remark: The above sample application is using also the event tracker introduced with ABAP interface IF_FPM_CHANNEL_MANAGER. The defined tracking time is 20 seconds, and the event handler of event FAILED_DELIVERY (class CL_FPM_CHANNEL_MANAGER_TEST) is sending an FPM Event of delivery type STANDARD, such the event queue is being resolved at the client. As an application developer, you can of course implement, extend or combine this as you like.

Bye bye 😉

Basis Monitoring & Tcodes with Key notes

2024-02-05T14:25:53.980000+01:00

Hi All,

I am thrilled to have the opportunity to connect with all of you through this blog.

The purpose of this blog is to aid newcomers in Basis in gaining knowledge about Basis-related Tcodes, including key notes and their usage and frequency.

I believe this will be beneficial for those who are beginning their careers in SAP Basis.

I wish you good luck and welcome to SAP Basis Team

The Daily Monitoring Basis-related Tcodes, their uses, and their related Tcodes are utilised for any future investigation.

Tcodes that pertain to operating systems and databases, their usage, and any future process.

The SAP Basis Admin is accountable for tuning performance. These Tcodes are associated with performance analysis at the application level.

Ticketing tools vary widely between organizations, including SAP ITSM (SOLMAN), Non SAP (ServiceNow, Zendesk), and others.

User Management, Role Management, and Transport Management will receive the majority of daily ticketing. Here are the Tcodes that pertain to these areas.

Tcodes that pertain to SAP Software Maintenance and related OS and other tasks.

Programs that are useful for administrative tasks related to Basis.

Thank you for taking the time to read the blog.

#SAPBasis #Basis Basis Technology EWM - Basis NW ABAP Monitoring Tools SAP EarlyWatch Alert SAP HANA Cloud, SAP HANA database SAP Advantage Database Server Oracle Database SAP S/4HANA SAP NetWeaver Application Server for SAP S/4HANA #Dailymonitoring NW Java Security and User Management Defense and Security SOLMAN Setup/Configuration/LMDB NW ABAP Monitoring Tools SOLMAN System Monitoring

Newly released! The much awaited SAP Sales Cloud V2 course and certification

2024-02-09T22:30:29.271000+01:00

Greetings, Knowledge Seekers!

I am thrilled to broadcast the much-anticipated launch of the free e-learning course and its related certification for SAP Sales Cloud Version 2.

Introducing our Digital First Course - Exploring and Configuring SAP Sales Cloud Version 2, tailored specifically for Consultants.

This all-inclusive course grants participants the chance to dive headfirst into the innovative features of our newest solution - SAP Sales Cloud Version 2. Whether you're a beginner administrator, functional consultant, or an individual thirsting to master the application, consider this interactive course your ultimate roadmap. The course covers a multitude of features, including advanced lead management, dynamic selling guides, strategic pipeline & forecast management, efficient activity tracking, MS teams integration, AI features powered by machine learning – to name just a few!

I am also excited to present the Certification - SAP Certified Application Associate – SAP Sales Cloud Version 2. This certification has 80 questions. It tests and validates that the candidate truly masters the fundamentals of SAP Sales Cloud Version 2 and possesses the essential knowledge expected of a consultant.

Note: You will need a license for SAP Learning Hub to take the certification.

Jump on this opportunity to enhance your knowledge and validate your skills with SAP Learning!

SAP Sales Cloud Customer Experience Training Certification

When will we leave cave painting behind us?

2024-02-14T11:00:55.309000+01:00

More then 17'000 years ago our ancestors in the French region of Perigord allowed themselves the luxury of art. They had the time to allow people to create cave paintings instead of engaging into the hunt for nutrition. That alone is striking, given that we think of the stone age as a period in which people were busy with anything but art. The oldest reported cave paintings go much further back, up to 39'000 years.

But what strikes me more than the level of freedom to create art is how it was created. With fingertips and brushes on a wall. We already translated a three-dimensional world into a two-dimensional representation of what we saw or wanted to express.

Looking at our today's world, I wonder if we have really progressed in that regard.

Spoiler

What's next..

However, upcoming technologies will offer us the opportunity to leave the cave walls behind and move our user experiences into a three-dimensional world or even directly into the brain:

Augmented Reality can already today be used with mobile phone cameras and handsets to display real-time information in a real-world, starting from directions going to system status or runtime information for machinery.

Virtual Reality is still clumsy to use but nonetheless impressive and the advancement of the technologies used in the VR-Glasses and handsets will make them smaller or even disappear because..

..reading the feedback of a human becomes affordable. Cameras, sensors and the computing power to analyze those signals are becoming a commodity and the..

..algorithms, including AI models, are available to a general public. Generative AI can be used to create on the fly scenes, interactions and settings in which we can interact with machines.

And if you remember the scene out of the first Matrix movie in which Neo is connected directly from his brain to the computer - scientists are working on these type of interfaces to read as directly as possible from the brain what we would like to express.

With these advancements, we will see new types of user interfaces emerge which wil allow us to link what we think to what happens in the machine without going through the bottleneck of speech:

Speech as a communication tool is a compromise, slow and full of possibilities for error and misunderstanding. I'm curious to see what will emerge as a solution as alternative to language and speech and how we will adopt these solutions.

Navigating the AI Landscape: A UX Designer's Guide

2024-02-14T11:01:22.387000+01:00

Introduction

As we stand on the brink of a technological revolution, AI is reshaping the way we interact with the digital world. I'm here to share my insights regarding this evolving landscape, offering observations into how AI, machine learning, and other related technologies can enhance our work in UX design.

Brief Overview of AI and ML

Artificial Intelligence (AI) is the overarching concept of machines carrying out tasks in ways that we consider 'smart'. It's a broad discipline aimed at creating systems that can simulate various aspects of human intelligence. Machine Learning (ML) is a subset of AI, focused on algorithms that enable machines to improve at tasks with experience. Think of AI as the universe of intelligent computation, with ML being a planet within it.

Deep Learning, in turn, is a subset of ML. It involves neural networks with many layers (hence 'deep') that can learn and make intelligent decisions on their own. Deep Learning has been instrumental in achieving significant breakthroughs in areas like image and speech recognition.

Then come Foundation Models, a recent development in AI. These are large-scale models (like GPT-3) that are trained on vast amounts of data and can be adapted to a wide range of tasks without being specifically trained for them. They are called 'foundations' because they provide a base layer of understanding that can be built upon for various applications.

These technologies are interrelated, forming a hierarchy from broad to specific. AI encompasses everything intelligent that a machine might do. Under AI, ML is the method through which machines learn from data. Deep Learning is a further specialization of ML with a focus on complex, layered neural networks. And Foundation Models are the cutting-edge, versatile systems pushing the boundaries of what AI can achieve.

Generative Pretrained Transformer (GPT) and Transformer Architecture

GPT, or Generative Pretrained Transformer, is a type of language processing AI. It's built on the Transformer architecture, which is revolutionary in the way it handles data. Traditional models processed data sequentially, one piece after another. The Transformer, however, allows for parallel processing, looking at entire sequences of data at once. This is done through mechanisms called 'attention' and 'self-attention,' letting the model weigh the importance of different parts of the input data and learn the context more effectively.

GPT takes this architecture and applies it to language, learning to predict the next word in a sentence. It's trained on a vast corpus of text and then fine-tuned for specific tasks. This pretraining is what makes it 'generative' - it can generate text, not just understand or classify it.

Inception of Generative AI

Generative AI came into existence as a natural progression from earlier AI models that were primarily discriminative. While discriminative models could classify and understand data, they couldn't create new data. The inception of Generative AI marked a shift from understanding to creation.

This shift was fueled by advancements in neural networks and an exponential increase in computational power and data availability. Researchers began exploring how neural networks could not only recognize patterns but also use those patterns to generate new, similar data. This exploration led to the development of models like Generative Adversarial Networks (GANs) and Variational Autoencoders (VAEs), and eventually to large-scale models like GPT.

Integrating Reinforcement Learning with Human Feedback

Adding to this is the concept of Reinforcement Learning with Human Feedback (RLHF). This approach trains AI systems not just on static datasets but on dynamic feedback loops. It’s akin to teaching a pet new tricks: the AI tries different strategies and, based on human feedback, learns which actions are desirable or undesirable. This human-in-the-loop methodology ensures that the AI’s learning trajectory aligns more closely with human values and preferences, making it particularly potent for personalization and adaptive learning scenarios.

Incorporating RLHF into the design of AI systems compels us to consider not just the initial user interaction but the ongoing relationship between the user and the AI as they adapt and learn from each other over time.

Various Approaches to AI

Understanding the various approaches to AI can be daunting, but it's crucial for harnessing its full potential:

Symbolic AI: Based on the manipulation of symbols and rules, this approach tries to mimic human reasoning.
Probabilistic AI: Focuses on using probabilities to make predictions and decisions.
Statistical AI: Uses statistical methods to infer patterns and make predictions.
Large Language Models (LLMs): These are trained on vast datasets to understand and generate human-like text.

Each approach has its strengths, and knowing which to apply can significantly impact the success of a project.

How Are Models Trained?

AI models are trained using large datasets. They learn by recognising patterns and making associations. For instance, an image recognition model might learn to identify cats by being shown thousands of pictures of cats and not-cats. Over time, it improves its accuracy through a process called backpropagation, where it adjusts its internal parameters to minimize errors.

AI and Design

In the realm of AI, as designers, we're tasked with shaping a human-machine relationship that is continually evolving. Unlike traditional design, where interactions are fixed, AI-based design involves a fluid, ever-changing dynamic. Non-AI systems interact in a consistent, unchanging manner. However, AI systems learn and adapt over time, leading to a constantly developing relationship.

As both the machine and humans learn and adapt, they engage in a reciprocal learning process, forming a dynamic feedback loop. This loop is characterized by an ongoing exchange of information, with both parties growing and adjusting to the interaction. Our role as AI designers is to foster effective communication within this vibrant human-machine relationship.

In this context, data becomes the pivotal element. Previously, data interaction was straightforward — a user command followed by a machine response. With AI, data is the foundation of learned behaviours, informing the machine and shaping its growth. Here, data inputs are about educating the machine with information, not just instructing it. Conversely, machine outputs are no longer fixed; they have generated responses that necessitate explanations of how the data led to a particular conclusion.

As designers, we are charged with orchestrating these interactions throughout the entire data lifecycle. This includes the initial data capture, guiding the machine's learning process, designing clear and understandable data outputs, and ensuring a seamless flow of information back into the system for continued learning. Our responsibility extends beyond creating interfaces; it's about crafting experiences that support this rich, ongoing dialogue between humans and AI, ensuring clarity, transparency, and a mutual growth trajectory.

A comparison can be drawn from the days when selecting a movie at a DVD store involved browsing aisles for a favoured title or relying on a recommendation from a salesperson. In contrast, platforms like Netflix now curate suggestions tailored to our tastes, informed by our viewing history.

Designers find themselves at the intersection of innovation, with three distinct yet interconnected realms to explore:

1. Designing with AI: Crafting Alongside AI

Designers are now partnering with AI in a collaborative dance of creation, where the output is a fusion of human ingenuity and machine efficiency. Imagine the synergy of a designer working with AI to conjure up ground-breaking architectural structures, much like Autodesk's venture in utilizing generative design principles to conceive their Toronto office. Here, AI becomes an ally in the creative process, providing new perspectives and solutions that push the boundaries of traditional design.

Moreover, designers harness AI to streamline repetitive tasks, freeing up creative energy for more complex challenges. Tools like Airbnb's system for transforming sketches into digital wireframes or Netflix's algorithm for adapting graphics across different cultures exemplify this trend. These innovations signify a new era where AI does not replace the designer but rather amplifies their capabilities.

2. Designing for AI: The Human-Centric Design Approach

Designing for AI requires a human-centred lens, focusing on crafting systems that prioritize user needs and experiences. It's about spotting those unique opportunities where AI can not only function but flourish in addressing real-world problems. Here, the designer's role transcends aesthetics, venturing into the realm of functionality and utility, transforming user needs into data-driven AI solutions.

Human-centered design makes AI effective. These are some ways:

1. Beyond Interfaces: Embracing Human-Centered Design in AI Algorithm Development

UX can aid in designing algorithms that mirror the decision-making processes humans employ, by considering their information, goals, and constraints. It can ensure that the decision environment, which encompasses both the algorithm and its human users should be thoughtfully constructed. Users should comprehend their AI tools well enough to use them effectively. Designers also aid in establishing guidelines and business protocols that translate algorithmic predictions into actionable insights, advising when human intervention is appropriate to supplement or override the AI.

2. To Translate User Needs into Data Requirements: A designer can aid in identifying the type of data necessary for training the model, considering various factors like predictive power (A percentage that refers to an ML model’s ability to predict outcomes given a certain input correctly), relevance, fairness, privacy, and security. Ensure the training dataset is comprehensive, reflecting the real-world scenarios the AI will encounter, and free from biases.

3. Knowing the source of the data & Tuning the Model: Evaluating data sourcing and collection methods for their suitability of the project is critical. Once deployed, A designer will assess if the AI meets the target user’s needs as per predefined success metrics. Provide feedback on adjusting the model’s parameters as needed to enhance its performance, focusing on metrics that reflect user experience, such as customer satisfaction or the frequency of users following the AI’s recommendations.

4. Addressing Bias, Fairness, and Transparency: UX designers can help analyze data with an understanding of the domain, Goal definition, possible and required outcomes and the process that generated it. This leads to designers being a crucial part of designing algorithms that are mindful of the environment they will operate in, avoiding controversial predictors. They aid in conducting usability tests or audits to detect and eliminate unintended biases.

5. Managing the Handoff in AI Systems: Designing for smooth transitions between AI and human control in situations demanding common sense or contextual understanding is very important. The accountability for any action in the real world still lies with human users as over-reliance on technology can leave users unprepared for instances where AI fails, necessitating more skilled human intervention. A UX designer can analyse such situations and will aid in designing smooth handoff processes.

6. Designing Reward Functions and leveraging User Feedback for Model Improvement: Designing the AI’s reward function is critical as it influences the user experience significantly. User feedback is essential in refining AI models and enhancing user experience. Designers analyse and optimize the reward data to enhance the model for long-term user benefits and anticipate the downstream effects of your product. This also allows users to contribute to the personalization of their experiences, thereby increasing their trust in the system.

7. Anticipating Errors and Designing Response Pathways: A Human-centred design prepares your AI system to facilitate user responses to inevitable errors, turning them into opportunities for learning and improvement.

8. Educating Users and Setting Realistic Expectations: Designers help communicate the capabilities and limitations of your AI product to customers. Help users develop accurate mental models and understand how their interactions train the system. It’s essential to balance user trust, avoiding both undue scepticism and over-reliance on AI.

9. Guiding User Trust in AI Systems: Users need to adjust their trust in AI systems appropriately, rather than relying on them implicitly in every situation. The phenomenon of 'algorithm aversion' is well-documented, where users may be sceptical of software systems. Conversely, there are instances where users place excessive trust in AI capabilities, expecting more than what the system can deliver. Designers help users develop a balanced level of trust, aligning with the system's actual capabilities and limitations by taking a human-centred approach.

For instance, openly acknowledging the potential inaccuracies in AI predictions can temporarily reduce trust in those specific outcomes. However, this honesty can foster a more sustainable trust in the long term. Users become more judicious in their reliance on the system, reducing the likelihood of disappointment due to misplaced expectations."

3. Designing of AI: The User Experience Frontier

When it comes to the design of AI, it's about envisioning and sculpting the interactions between AI systems and their human users. It's a space where new forms of engagement, like voice-activated assistants or image recognition software, become gateways to enhanced user experiences. The key challenge here is transparency: designing interfaces that not only serve but also educate. Users should be able to grasp, with just the right level of detail, how AI systems make decisions and learn over time.

An example could be the intuitive dashboards in our cars that provide real-time insights into the vehicle's AI, or the smart home devices that learn our preferences and conversationally explain their actions. These are no longer scenarios from a sci-fi novel; they are today's design challenges that call for a blend of technical knowledge, user empathy, and creative foresight.

In essence, the designer's canvas has expanded, not just in size but in dimensionality. As AI continues to intertwine with our daily lives, it invites designers to step into roles that are as diverse as they are dynamic, shaping not only how AI looks but also how it behaves and interacts in the fabric of human experience.

Understanding the Limitations of AI in UX Design

Incorporating AI into UX design comes with distinct limitations that underscore the irreplaceable value of human insight and direction.

1. Hallucinations and Reliability

AI "hallucinations" refer to instances where a model confidently generates an incorrect response. These can be caused by inconsistencies within a large data set or errors in the model's training methodology. In fields where precision is critical, such as financial reporting or legal documentation, these inaccuracies can introduce significant risks. Combatting this requires robust document structuring and advanced prompt design techniques to direct AI towards more dependable outcomes.

2. Prompt Sensitivity

Large Language Models (LLMs) are highly sensitive to user input. The nuances of how a prompt is phrased can lead to varied and unpredictable responses. This sensitivity necessitates a careful and strategic approach to prompt engineering, ensuring that the AI's responses align with user intentions. The evolving role of "Prompt Engineer" is a testament to the significance of crafting prompts that steer AI toward delivering consistent and accurate results.

3. Context Window

Limits The context window, the amount of information an AI can consider when generating a response, is a notable constraint. As the context window expands, so does the computational complexity. Despite improvements like GPT-4's extended context window, there remains a ceiling to the volume of data an AI can process at a time. This limitation is particularly challenging in tasks that require the review of extensive documents, where the AI must understand and analyze large quantities of text. Designing for AI in UX thus requires a thoughtful balance between the AI's capabilities and the complexity of the tasks it is expected to perform.

Things Designers Should Know Before Designing for AI

Technical Knowledge

Grasping the basics of data science and AI techniques like NLP and deep learning.
Basic Understanding of the AI toolchain and DevOps processes for AI development.
Access to clean data set.

Ethics in AI

Integrate ethical standards into the design and development process, ensuring accountability, fairness, and transparency.
Navigate GDPR/compliance mandates and be mindful of the financial and human impacts of design decisions.

Collaboration is Key:

Work closely with data scientists and engineers to understand the technical aspects and constraints.
Foster a shared vision across multidisciplinary teams and participate actively in the AI development lifecycle.
Engage in design thinking activities tailored to AI and address the needs of diverse users.

AI Strategy

Develop and communicate a user-focused AI strategy, explaining barriers to adoption and the business and user benefits.
Articulate your company's AI strategy, differentiators, and the journey toward AI success.

Designing AI Interactions

Translate AI model outputs into understandable insights for users and design interactions that capture human input for machine learning.
Prototype and test AI solutions frequently, and design for various stages of the AI lifecycle, such as model maintenance and data collection methods.

User Trust and Transparency

Build trust by making your AI interactions transparent and understandable.

In conclusion, AI is not just a tool but a new frontier in design. By embracing it, we can create more personalized, efficient, and engaging user experiences. Let's embark on this journey together, continuously learning and adapting to ensure technology serves humanity in the most beneficial ways.

Resources to Refer :

Generative AI at SAP: https://open.sap.com/courses/genai1
AI Ethics at SAP: https://open.sap.com/courses/aie1-1
Designing for Generative AI: https://experience.sap.com/internal/fiori-design-web/generative-ai-design/
Designing for Intelligent Systems: https://experience.sap.com/internal/fiori-design-web/designing-intelligent-systems/
SAP AI community file: https://www.figma.com/file/SJh2Eb5KrBIbaK3Bo2wqtq/AI-UX-Pattern-Community-Explorations?type=design&node-id=737-200772&mode=design
AI Design Community Teams Channel
AI Design Community Exploration File
Prompt Pattern Presentation Figjam

Card UI Design in a Business Context: A New System for Mobile Apps by SAP

2024-02-16T17:13:40.669000+01:00

When I asked my mother what comes to her mind when I say, “card components in mobile apps”, she first gave me a puzzled look, as if I had just asked her to solve a Rubik’s cube blindfolded. With a hint of confusion in her voice, she replied, "Cards? Like a deck of cards on your smartphone? I thought we were done with the whole 'Solitaire' phase."

What is so special about card UI design?

In her defense, it's not every day someone asks about card UI components. But while my mother may have initially misunderstood the concept, there is a little bit of truth in her answer: Cards in apps resemble physical cards, like those found in a deck. This familiarity can actually help users quickly understand the purpose of each card within an app. In fact, even Apple used a design approach called "skeuomorphism" in the early versions of iOS, which aimed to make digital interfaces mimic real-world objects.

Many consumer apps are using card components to provide a clear visual hierarchy, organizing information into brief, self-contained units. This makes it easier for users to scan the app content. Cards are also well-suited for responsive design, enabling adaptation to different screen sizes, screen orientations and device types, such as phones or tablets.

And of course, there are those nice, rounded corners that soften the overall look of the app, making it more friendly and approachable – who knew geometry could be so charming?

Cards make it easier to scan the app content

Using cards in an enterprise context

The benefits I just mentioned go far beyond consumer apps. In the world of multifaceted software products, where users sometimes struggle with large amounts of information and features, the use of cards can improve the user experience as content becomes more structured and modular.

However, incorporating cards in the context of large software companies just like SAP can also be a challenge as there are many different products with a wide variety of use cases. To address this, the teams for the SAP Mobile Design System and SAP BTP SDK have supported app teams by offering several card types. These card types include object cards, list cards, and chart cards, among others that can be utilized when developing apps.

For example, a maintenance app can use object cards that display important information, such as work order name, description, and priority. The object cards allow users to efficiently manage maintenance activities and monitor progress. Or, in a procurement app, list cards can be used to display the top three pending purchases with additional information such as purchase price and due date that help users prioritize and manage their workload more effectively.

Unfortunately, these card types are not flexibly adaptable or extendable, so that many app teams are forced to design and develop custom cards, which not only adds additional development efforts, but also creates inconsistent cards across SAP mobile apps.

So how can we ensure that our SAP Mobile Design System and SAP BTP SDKs provide reusable card components that are flexible enough to adapt to any use case while maintaining a consistent design?

A new approach to display your business app’s content

Our solution is a sophisticated “card system” that provides a toolkit of so-called nested components that reside in the card container. These nested components include lists, charts, calendars, KPIs, and many more components to fulfil the needs of any SAP product. Moreover, the card system offers improved customization, flexibility, and adaptable sizing options to fit different layouts, such as a masonry or a carousel layout into which cards can be placed.

The core of this card component approach is the modular structure of three flexible containers that exist in the card: the card header, the card body, and the card footer. Each of these containers can be separately controlled, adjusted, and switched on or off.

Three separate containers in the card ensure maximum flexibility

But like Solitaire, every good card game also needs a couple of rules. To ensure consistency despite the flexibility of the new card component, we’ve also defined “Do’s and Don’ts” as well as design recommendations within our design guidelines.

The card header displays only key details, such as a title and a subtitle. The card body can show additional information alongside the content of the card header, such as in-depth details, KPIs, or relevant graphics. The card footer is used for important or routine actions that affect the content of the card.

In addition to the card itself, card layouts, such as a carousel or masonry layout can be used to facilitate a quick and modular overview of information across different content resources. Using cards together with card layouts can enable a holistic information approach and ensure an intuitive and frictionless app experience.

Card layouts such as a masonry layout provide a quick overview of various information

Design along various use cases

Before developing the card system, we prioritized gaining a comprehensive understanding of SAPs mobile apps and their specific needs. This included interviews with all app teams and extensive research. Our goal was to identify the common elements found in already existing cards and determine their frequency of occurrence.

Through this analysis, we discovered, for example, that the existing cards heavily emphasized the uppermost part of the card and often included a title, a subtitle, and a thumbnail. With the insights gained from this research, we began to develop the card system and the above-mentioned header, body, and footer structure, along with a set of recommended components for each part.

Business card UIs often emphasize the uppermost part of the card

Of course, there were also elements that were only used by one single app within cards, such as a QR code. As much as we would have loved to accommodate these special cases (people love QR codes!), we had to stay focused on our main objective: prioritizing the most widely used features.

Testing it regularly

To improve and refine the new card component, we used regular evaluation cycles to test the card system's design and implementation. Getting feedback on our design was really important as it helped us to make necessary modifications and enhance the overall functionality. For example, we incorporated the icon stack component into the card header based on a feedback session with our stakeholders. Furthermore, we plan to continue to gather feedback on a regular basis and to expand the card system in the future.

How to use it

Our card system is now available for designers using our Figma UI Kit of the SAP Mobile Design System for Android and SAP Mobile Design System for iOS, as well as for developers using the SAP BTP SDK for Android and SAP BTP SDK for iOS. This is our initial release of the card system, and we are committed to actively working on enhancing it in future releases. We encourage you to try it out and provide feedback on your experiences! 😊

The card system allows creating a wide variety of card UIs

For more information, explore the card system in our design guidelines for SAP Fiori for iOS or SAP Fiori for Android, and our technical documentation for the SAP BTP SDK for iOS and SAP BTP SDK for Android card component.

Epilogue

Of course, I also read this blog post to my mother. What begins with initial enthusiasm ends 32 seconds later with her picking up her phone and no longer listening. I wondered: Is it because it's my first blog post and I still need to optimize my skills? Is UX design just not interesting enough for a woman who works in elderly care? Or is it simply because she doesn't really understand English...?

After all, the fact that she reached for her phone first shows me one thing: mobile design is relevant. It’s not just my generation or the generation after me that is literally addicted to their phone and would like to perform every activity with it. By pursuing innovative approaches, such as a flexible card system, we can enhance the experience also for business users and simplify digital business processes by using these beautifully rounded corners.

And who knows, maybe one day apps will become “old-fashioned data silos”, thanks to artificial intelligence. AI might be able to condense app content to the point where we will only need to display a widget, a notification, or just one single card.

Special thanks to Janin Stoess, Eva Artinger, Natalie Stainton, Huy Ngo, Cara Stallone, Yuepei Guo, Diana Klukas, Michael Krenkler, Marisa Wollner, Emil Voutta, and all the other colleagues who have contributed to this project at SAP 💙

Latest benefits enrollment experience in SAP SuccessFactors Employee Central

2024-02-20T23:17:10.887000+01:00

In the dynamic and ever advancing realm of HR technology, evolution is not just a choice, but a mandate to successfully compete.

We at SAP SuccessFactors are very excited to unveil a new chapter in our journey – reimagining our SAP SuccessFactors Employee Central Global Benefits solution.

We started our revamp journey about one year ago with focus on “enhancing the user experience to make benefits management seamless, simplified and far more intuitive”.

Our goal is to build a platform that goes beyond functionality, one that meets the level of intuitiveness and just-in-time help that employees have come to expect from business and consumer software nowadays.

We understand that Total Rewards teams must offer competitive benefits that are based on local market trends and prevailing practices. Therefore, we are delivering a user experience designed to meet the benefits needs of the North America market, with plans to ultimately cover all countries globally.

Our latest benefits experience supports administration of open enrollment processes, exception cycles due to employee work or life events (such as child birth, promotion, etc.).

We currently cover the following benefit types: Insurances (including health, dental, vision, life), Section 125 savings plans (including HSA, FSA, LPFSA, DCRA) and pensions. Support for additional benefit types is planned for future releases.

Here are some key highlights of the latest enrollment experience:

Personalized UX: Personalized text and instructions enable you to deliver a tailored enrollment experience aligned with your organizational needs.
Guided enrollment:An intuitive, step-by-step guided enrollment experience makes sure employees never lose track of their progress. Real-time benefits eligibility updates help your employees continually understand the choices and options available by presenting them with all the benefits for which they are eligible to enroll.

Smart system: Solution detects when proof of good health is required for a benefit coverage; Also, based on number and age of dependents, the system assigns employees to the appropriate insurance coverage tiers, reducing employee efforts in matching the right coverage tier.

Informed decision-making: Side by side benefit plan comparison allows employees to see difference in coverage, costs and other important factors, making it easier to assess plan options to select the best-fit plan. Employees can also view how much they spend on benefits per pay period and annually, which further promotes informed decision-making.
Increased transparency:Organizations have the option to share how much they are spending on their employee’s benefits, which promotes transparency.

Employee education resources: Embedded informational text and simplified on-screen “help and resources” interface helps to educate employees and provides more clarity into their benefits options.
Mobile -enabled: Employees can complete their benefits enrollment from any location using our SAP SuccessFactors native mobile application.

The latest benefits experience will provide significant value to both employers and employees, but don’t just take our word for it. Here is what some of our customers have said about the new benefits experience:

“The New Enrollment experience is a game changer”

- An International European-based company with 300,000 employees

“Latest Benefits Experience is a major improvement”

- A 40,000 employee US-based company

“We are putting EC Global Benefits back on our roadmap”

- A large global software company

"I love that employees must make an enrollment decision for each benefit"

- A mid west company live on the Legacy experience

Interested in learning more?

Our new Enrollment Experience will be available through an Early Adopter Care Program starting February 29th, 2024 for those customers using insurance and savings plan benefit types. The latest enrollment experience is planned for general availability with the 1H 2024 release (May 17, 2024).

If you are an SAP SuccessFactors Employee Central customer and are interested in our joining the early adopter care program or learning more about the new Benefits enrollment experience, please send me an email at simar.kaur@sap.com.

I look forward to hearing from you!

New Asynchronous Export to Spreadsheet Feature for the Multidimensional Data Grid Apps

2024-02-27T11:20:25.612000+01:00

Dear SAP Community,

In 2021, the Web Dynpro Multidimensional Data Grid App replaced the SAP Design Studio app as default reporting tool for drill-down reporting in SAP S/4HANA.

Initially designed for human interaction, this web application offers an export feature that has been continuously improved and streamlined over time:

Export of PDF files
Streamlining of export to improve performance
Google workspace integration with the possibility to export spreadsheets to Google directly
etc.

However, there always was the possibility that the amount of data cells simply was too large, and the system would run out of memory, or into a timeout. SAP Note 2547776 introduced a popup message that warned a user of these risks in case more than 100.000 cells would be exported.

Now the next step in terms of performance optimization has been taken by offering to export large amounts of data in a background task. Furthermore, the user can trigger the export in the background (see Figure 1), and continue working in the application without having to wait until the export has finished, with or without the application still alive and running.

Figure 1: “Export to Spreadsheet” popup with a new function to trigger the export in the background.

Once the background task has finished, if the application that has triggered it is still running, the user is informed of the success (or failure) of the export. The exported file is then available for download for the next 72 hours. Expired files will be deleted automatically from the database table.

The files can be accessed either in a new tab “Downloads” (e.g. in the generic FPM_BICS_OVP apps), or in a dialog window that can be accessed via the download button choice for applications that do not offer the new tab directly (see Figure 2). In both cases, the same component is used, and the layout is the same.

Figure 2: List of downloads to monitor the status and access the result of the asynchronous exports.

In the list of downloads in this example, the first file “export.xlsx” already has been exported successfully, while the second file “demo_export” is currently being exported. Download is possible only for successfully exported files, while deletion is possible also for entries where the export has failed or is currently in progress. However, deleting an unfinished export does not abort the background process.

During a single user session, only one background export can be executed at any given time. If you start an export in background while there is still another process running, the new process will not be started, and an error message will be displayed.

It should be noted that this does not mean that unlimited amounts of data can be exported from the grid now. There are still scenarios where the amount of data required to export a file is outside the boundaries of memory allocation for a work process. This depends not only on the number of cells in the grid, but also on their (conditional) formatting and merging, variables, and filters, down to the definition of the query and the used database tables. Even the database technology may have an influence on how much data can be processed at once.

The feature is available with SAP Note 3427386 for SAP_BW 757 and 758, and SAP Note 3434831 for BW/4HANA 400, and it is planned to be contained in the 2408 updates of SAP S/4HANA Cloud Public Edition and SAP BW/4HANA Cloud Public Edition.
[A previous version of this blog stated that it will be contained in the 2408 update. Since this is current state of planning and may be changed by SAP at any time without notice, the wording has been adopted.]

With this new feature, you can more easily export data from a Multidimensional Data Grid Apps without blocking the application and reduce the risk of running into error situations.

SAP Fiori for SAP S/4HANA - Empowering Your Homepage: Enabling My Home for SAP S/4HANA 2023 FPS01

2024-04-26T11:34:59.906000+02:00

Good news! The new My Home page is finally available with the SAP S/4HANA Private Cloud Edition (and on-premise) solution with the SAP S/4HANA 2023 FPS01 release. So it’s time to explore more about the sections and features that it contains.

The new My Home is like your personal command center for work. It provides you with a super easy way to find all the important information that you need to get your job done faster. With the new My Home entry page, you can keep track of your tasks and situations, check out key insights via analytical tiles and cards, and you can access your favorite pages and apps from any device. It offers a space of your own space with enhanced personalization capabilities and a better user experience! Plus, it builds on the features of the SAP Fiori Launchpad, using spaces and pages to make everything run smoothly.

New My Home available with SAP S/4HANA 2023 FPS01

As a part of this blog post, you will:

Get familiar with the structure of the new My Home
Explore the various building blocks / technical components necessary for My Home
Learn how to enable My Home functionality step-by-step
Discover how to assign My Home to your business users

If you are interested in learning about the features and functionality about the new My Home in SAP S/4HANA from an end user's perspective, you are recommended to refer to this blog from Thomas Reiss User Experience Advances with SAP S/4HANA 2023 FPS01 (Private Cloud and On-Premise).

IMPORTANT : Please keep in mind that to enable My Home on SAP S/4HANA 2023 (as of March 2024), you need to have at least the first feature pack stack installed for this product version, that is SAP S/4HANA 2023 FPS01.

IMPORTANT : In this blog post, for brevity, the abbreviation FLP = Fiori launchpad and My Home = My Home in SAP S/4HANA.

Structure of the My Home - main components

Let’s get started by understanding its structure and components briefly before we deep dive into configurations and the other technicalities.

The standard entry page contains the following sections and functionality.

#	Section	Functionality
1	To-Dos	This section contains two parts: Tasks - That are populated from the My Inbox App Situations - That are populated from the My Situations App Note: At the time of writing the blog, the My Situations Extended App was not integrated with the view You also have an option (depending upon your release) to either see a contact card or to directly send an email to the concerned Task Owner or Situation Owner from the Task / Situation tiles.
2	Pages	This section can be personalized by the user with their favorite Launchpad Pages. However, at the beginning (without any user personalization) it shows up to the first 8 pages that are assigned to the user. For these 8 Pages, you see 8 different colors which are assigned automatically from the color palette. Each colored Page would have a title and a subtitle that corresponds to the Page title and Space title respectively from the Page they belong. In case both the Space and Page titles are the same, you would just see a title without any subtitle. For example the Fiori Launchpad page in the below screenshot.
3	Apps	This section is comprised of the following parts: Favorites- Under this tab, you can add Tiles from various other Spaces and Pages. You can also group these applications together under a custom group with a custom name. For example, the group My Sales Analytics in the following screenshot is a customized app group. If you navigate to a page from the Pages section (of My Home) described above and you add a tile as a favorite (from User Action Menu --> Edit current Page, and from a tile menu --> Add to My Home). You will see that the app gets added to the favorites tab, with the same color as the original Page. For example Manage Sales Order, My Inbox and Sales Order Fulfillment apps in the following screenshot were added via Overview – Internal Sales Page, Manage Sales Quotation, Manage Credit Memo Requests, and Manage Debit Memo Requests from Sales Processing – Internal Sales and so on. However, If you perform the same action on any other page (other than these 8 colored pages, from the Pages section), the app that you mark as a favorite is displayed in a random color that can be customized by the end user. You can also add an App tile via the App Finder (by choosing the My Home Page under My Home space), and if that application is not a part of your favorite pages, then a random color is applied to the marked favorite App, which is usually the grey color. For example, Manage Workflows App in the following screenshot is grey in color. Most Used - This list gets populated from the system and is based on the most used applications in terms of their frequency. Note : For the Most Used and Recent Used tabs to appear, the business users must enable User Activities tracking in their Fiori launchpad > User Actions > Settings dialog. Recently Used - This list gets populated from the system and is based on the recently used apps (i.e., based on a descending timestamp order). One very cool feature supported by the Recently Used tab support is the "Resume Last Activity" option, where you can return to the same application state (i.e., same filters variants, same table variants etc.) from where you last left the application.
4	Insights	This comprises of two parts (which while populated, splits up into two different sections): Insights Tiles: You can use the Add Tiles option from the Insights section to add Dynamic tiles as your content. The system would typically propose Dynamic Tiles (such as KPI tiles) as a part of this section. However, just like other areas, you could jump to App Finder and include any tile here). The primary purpose of this section is to place analytical tile content in it for quick insights. Insights Cards: Here you can add cards from SAP Fiori Elements based Overview Pages(OVP) and List/Table cards from List Reports(LR) and charts from Analytical List Pages(ALP). You also have options to add filters and change the chart type of the standard content while adding them from an OVP / LR / ALP page.

My Home - Building Blocks and Technical Components

Now that you are familiar with a basic structure of My Home, let's look at some of the technical components involved as part of it.

Spaces and Pages Layout: This entry page is based on the Spaces and Pages layout, which is a must to enable the My Home capability.
SAPUI5 Home Component: Available as a part of SAP FIORI FES FOR S/4HANA 2023 FPS01 (SAP S/4HANA 2023 FPS01), This component contains the user interface for My Home in SAP S/4HANA. Just like other UI5 applications, this is based on a BSP application (a SAPUI5 Component) PRODUCT_HOMES1.
SAP Fiori Launchpad Configuration : By default the My Home is disabled in S/4HANA 2023 FPS01 and you need to do some Fiori Launchpad configurations using Launchpad Configuration Parameters in order to enable My Home in SAP S/4HANA.
Required App Authorizations: The To-Dos section only displays the Tasks and Situations if you have the target mappings for the My Inbox App and the My Situations App assigned to the Fiori User (i.e. if you have authorizations to access these applications)
Various OData Services involved: The following table summarizes various OData services required to use the My Home in SAP S/4HANA, based on its various components.

#	Section	OData Service	OData Version	Description
1	To-Dos	For Tasks: TASKPROCESSING (Namespace: /IWPGW/ )	V2	Task Gateway Service, required for My Inbox Tasks
		For Situations (Standard Situations): C_SITNMYSITUATION_CDS	V2	RAP: C_SITNMYSITUATION_CDS, required for Situations
2	Pages	Pages are read as a part of FLP service itself and require no additional OData service. For personalization of the pages INTEROP service is used (see point 3)	NA	This should be available by default.
3	Apps	Apps are read via the INTEROP (Namespace: /UI2/)	V2	Gateway Service of Interoperability, required for Personalization (This should also be already active, by default)
4	Insights	For Insights Cards: /UI2/INSIGHTS_CARDS_READ_SRV (belongs to Service Group /UI2/INSIGHTS_SRV)	V4	Insights Cards Repository Service Definition, required for reading Insight Cards.
		For insights Tiles: INTEROP service is used, where the tiles added to this section are stored as users personalization	V2	This should also be already active, by default

Note: The other OData services like FDM_PAGE_RUNTIME_SRV, PAGE_BUILDER_PERS, OData v4 /iwngw/notification , ESH_SEARCH_SRV etc. that are required by the FLP, are out of the scope of this blog.

The Image below summarizes the OData services, Target Mappings and the BSP required:

How to enable My Home

Now that you have a good understanding of all the basic building blocks of My Home in SAP S/4HANA, let’s get started. After activating the necessary components, you shall also create a Role Z_MY_HOME and add all the relevant authorizations to that.

You would do the My Home enablement in the following 5 steps.

Step1: Enabling Spaces and Pages Layout
Step 2: Activating the My Home UI5 Component
Step 3: Activating the required OData V2 and V4 services
Step 4: Configuring Launchpad Parameters
Step 5: Adding relevant authorizations i.e. Target Mapping and OData Authorizations via a PFCG Role

So, let’s get started…

Step 1: Enabling Spaces and Pages Layout

The first prerequisite is to check if the Spaces and Pages Layout is already enabled. Please note that the classical Home Page Layout has been already deprecated as of ABAP Platform 2021 and we strongly encourage you to move to the new layout i.e., Spaces and Pages if you haven't.

To validate the enablement, click on the User Actions Menu (your profile picture icon) --> and then click on Settings.

On the Settings Dialog, you would find a menu option Spaces and Pages. If you see this menu, the new layout is already configured. Click on it, to reveal the Spaces and Pages settings. Ensure that you have both the Use Spaces and Show My Home check boxes enabled, as shown below.

If you see this Spaces and Pages menu option, you can skip this step and move to the next one after checking both the boxes and clicking on Save.

If in case you DO NOT see the Spaces and Pages menu option at all, and instead you only see the Home Page menu option (as shown in the following screenshot), you must activate and configure the new Spaces and Pages Layout.

To activate the new Spaces and Pages Layout use the following steps.

Navigate to the transaction STC01 (Task Manager for Technical Configuration).
Enter the Task List name as SAP_FIORI_FOUNDATION_S4 (which is used to activate Fiori foundation) and click on the Generate Task List Run (F8) button.
On the next screen with generated task list, uncheck all the tasks using Skip All Tasks (F7) button and then only Select the task Activate and Configure FLP for Spaces and Pages (/UI2/FLP_CUS_CONF). You will get an Information popup that the activation step has dependencies on other steps like creating transports, activating services etc., click Continue for all.
Finally, Click on Start/Resume Task List Run In Dialog (F8).

This step is just creating some entries in the /UI2/FLP_CUS_CONF transaction and activating the required OData services, therefore it should typically not take much time to end up in a successful state.
If in case you are interested in knowing about the entries that it creates in the Launchpad Configuration, below is a screenshot of the customizing.
Once you have performed the configuration mentioned in the previous step, Spaces and Pages menu option becomes available in the Settings dialog (from the User Actions Menu). Check the Use Spaces and Show My Home check boxes as explained above, and you are good to move to the Step 2.

Note: that sometimes you may have to enable these two check boxes one by one, by opening the Settings dialog twice, as the former has a dependency on the latter.

Step 2: Activating the My Home UI5 Component

After ensuring that you have the Spaces and Pages Layout enabled for our Launchpad, you can move on to the next steps of activating the services that are required to enable My Home in SAP S/4HANA. You first start with activating the UI5 component for My Home i.e., the BSP application.

The standard SAPUI5 component that is available for the My Home (shipped with S/4HANA2023 FPS01) has its component id as ux.eng.s4producthomes1 and the BSP name is PRODUCT_HOMES1.

To activate the ICF Node, go to the transaction code SICF, Enter the BSP name PRODUCT_HOMES1 (which is also the ICF Node name) in the field Service Name and click Execute.
Right click on the service node and click Activate Service. Select the first Yes button on the confirmation dialog.

Step 3: Activating the required OData V2 and V4 services

After the BSP, it's time for you to activate the Back-end services of the My Home entry page i.e., the required OData services.

As a part of this step, you will activate the following OData services, that have been described above:

TASKPROCESSING (namespace /IWPGW/) for My Inbox
C_SITNMYSITUATION_CDS - for My Situations (Standard only supported for now)
INTEROP - for personalization service. (But don’t worry too much about this, as it is always available with the basic launchpad setup).
/UI2/INSIGHTS_CARDS_READ_SRV - (Service Group /UI2/INSIGHTS_SRV) for viewing the Insights Cards

Typically for an OData V2, the transaction /n/IWFND/MAINT_SERVICE (help doc) is used, and to publish an OData V4 service, we use /n/IWFND/V4_ADMIN (help doc).

Refer to: the section Activate OData Service in the SAP Gateway Hub in the ABAP Programming Model for SAP Fiori guide.

However, since these OData services are also Fiori foundation services. This task of OData service activation can be done by using the task lists SAP_FIORI_LAUNCHPAD_INIT_SETUP and SAP_FIORI_FOUNDATION_S4.

But before you go ahead and activate these services, let's do a quick test to validate if they are already active on your system. In order to do so, use the following 4 URLS

TASKPROCESSING (namespace /IWPGW/) https://hostname:portnumber/sap/opu/odata/IWPGW/TASKPROCESSING;mo;v=2/$metadata
C_SITNMYSITUATION_CDS - https://hostname:portnumber/sap/opu/odata/sap/C_SITNMYSITUATION_CDS/$metadata
INTEROP - https://hostname:portnumber/sap/opu/odata/UI2/INTEROP/$metadata
/UI2/INSIGHTS_CARDS_READ_SRV - https://hostname:portnumber/sap/opu/odata4/ui2/insights_srv/srvd/ui2/insights_cards_read_srv/0001/$metadata

IMPORTANT: Replace the hostname and portnumber with your application server from your FLP URL.
For example, if your FLP URL is https://mydummycompany:443/sap/bc/ui2/flp?sap-client=100&sap-language=EN#Shell-home the first link becomes https://mydummycompany:443/sap/opu/odata/IWPGW/TASKPROCESSING;mo;v=2/$metadata

If a service is active, you will see an XML returned with entities in its response. The response would start with <edmx: Edmx xmlns.

However, if a service is inactive, you will see an error. The response in this case, would start with <error xmlns.

In case you find all the services to be active, please skip this step and move to Step 4.
However, if you find some URLs are returning error code, follow the bellow mentioned steps based on the services that don’t work.

Now let's take a step-by-step look at how you can activate these services in case if they are not active on your SAP S/4HANA system.

TASKPROCESSING: Task Processing is an OData V2 service related to the My Inbox Application. And this service requires some additional customizing.
Refer to SAP Notes 2676990 - Release Information note for SAP Fiori My Inbox and 2424054 for more info on How to setup the My Inbox app.
C_SITNMYSITUATION_CDS: This is an OData V2 service and must be activated via the transaction /IWFND/MAINT_SERVICE. Follow the steps mentioned in the SAP Help doc : Activate OData Service in the SAP Gateway Hub to activate the OData service.
INTEROP: As mentioned above, this should be already up and running for you as it’s a part of the Launchpad itself.
However, in case you still do not see this, please ensure that you run the task list SAP_FIORI_LAUNCHPAD_INIT_SETUP to verify the launchpad configurations and the Task 'Activate Gateway OData Services for Launchpad (/IWFND/MAINT_SERVICE)' should take care of activating this service.
/UI2/INSIGHTS_CARDS_READ_SRV: This OData V4 service is a part of Service group /UI2/INSIGHTS_SRV, which is published via the Task Publish Service Groups Foundation (/IWFND/V4_ADMIN) of the Foundation Task list SAP_FIORI_FOUNDATION_S4.

Note : For INTEROP and /UI2/INSIGHTS_CARDS_READ_SRV, In case if you have never run the task list before, please refer to the Step 1, where we explained the steps required to execute a single task Activate and Configure FLP for Spaces and Pages (/UI2/FLP_CUS_CONF) of the task list SAP_FIORI_FOUNDATION_S4.
Repeat the same steps for your desired task in the desired task list.

Step 4: Configuring Launchpad Parameters

After ensuring that all the underlying services required to run the My Home are in place, it’s time to configure the Launchpad Configuration Parameters.

SPACES
SPACES_MYHOME
SPACES_CUSTOM_HOME
SPACES_CUSTOM_HOME_COMPONENT_ID
UI5_INSIGHTS

The first two parameters should be already in place. In case if you don’t find them, please execute the task Activate and Configure FLP for Spaces and Pages (/UI2/FLP_CUS_CONF) of the task list SAP_FIORI_FOUNDATION_S4 as described in the Step 1.

To maintain the other configuration parameters, process as following.

Navigate to the transaction code /UI2/FLP_CUS_CONF (Client Specific Launchpad Configuration Settings), and click on New Entries.
To enable the My Home, you must use the FLP config parameters: SPACES_CUSTOM_HOME and SPACES_CUSTOM_HOME_COMPONENT_ID.
The former parameter is used to declare that you have a custom home page to be enabled and the latter parameter is used to provide the component info (a SAPUI5 Component) for this custom home page. This is same UI5 Component which you activated as a part of Step 2 , i.e., ux.eng.s4producthomes1 having the BSP name as PRODUCT_HOMES1.
This My Home SAPUI5 component delivered by SAP also requires an FLP configuration parameter which would be used to enable the Insights Cards i.e., UI5_INSIGHTS.
Enter the following values on the "New Entries: Overview of Added Entries" screen, that opened after clicking New Entries. Then click Save.
Launchpad Property ID
Property Value
SPACES_CUSTOM_HOME
true
SPACES_CUSTOM_HOME_COMPONENT_ID
ux.eng.s4producthomes1
UI5_INSIGHTS
true

After creating these 3 new entries, confirm that you have all the 5 configuration parameters (including SPACES and SPACES_MYHOME) setup correctly.

Step 5: Adding relevant authorizations i.e., Target Mapping and OData Authorizations via a PFCG Role

This is the final step and as a part of this process, you will include authorizations to these My Home building blocks (including the OData services and the Target Mapping) to a PFCG Role that will be used to provide complete access to My Home to users.

Navigate to transaction PFCG, enter a role name, for example Z_MY_HOME and click on the Create Single Role button.
Document the role description and click on the Menu tab. Save the role if prompted. Click on Insert node button and choose Authorizations Default.

Now you will add the authorizations for the above-discussed OData services to this role.
- TASKPROCESSING (namespace /IWPGW/) for My Inbox
- C_SITNMYSITUATION_CDS - for My Situations (Standard only supported for now)
- INTEROP - for personalization service. (But don’t worry too much about this as it is always available with the basic role required to run the launchpad ex SAP_FLP_USER or classical SAP_UI2_USER_700 ).
- /UI2/INSIGHTS_CARDS_READ_SRV (Service Group /UI2/INSIGHTS_SRV)
Start by adding the OData V2 services by using the menu Insert Node --> Authorization Default
Choose the option SAP Gateway Business Suite Enablement - Service from the Authorization Default drop down. Use the value help to add TASKPROCESSING V2 Service to the same.

Although you just need Version 0002 for My Home to work, you can add both the versions (0001 and 0002) of the service for now. The view of Role Menu should look something like the following screenshot.
Repeat the steps for menu Insert Node --> Authorization Default, but this time select the Authorization Default type object as Service Gateway: Service Groups Metadata i.e., IWSG, after adding the authorization default, the Role Menu should look something like below.
Similarly add the Authorization Defaults for other OData V2 services as well i.e., C_SITNMYSITUATION_CDS and INTEROP.
In case of a OData V4 service, the entire service group needs to be authorized. Therefore, for the OData V4 service /UI2/INSIGHTS_CARDS_READ_SRV, you must add the authorizations to Service Group /UI2/INSIGHTS_SRV.
This is done by using the menu Insert Node --> Authorization Default and selecting the option SAP Gateway OData V4 Backend Service Group & Assignments.

After adding the Insights service group, the role menu should appear as the following screenshot.

With this step, the backend set up is complete and now must perform the front-end configuration. For this you must provide authorizations to My Inbox and My Situations apps. You can assign these authorizations by creating a Launchpad Catalog and assigning it to your Z_MY_HOME role.
Navigate to the SAP Fiori Launchpad Content Manager: Client Specific (transaction /n/UI2/FLPCM_CUST). Click on the Catalogs Tab (that should be preselected) and then click Create.
Enter a new Catalog ID and title (in the New ID and the New Title fields) and click Continue.Enter a customizing request if prompted for.
Now switch to the Tiles/Target Mappings tab and search for the following two Fiori Apps using their IDs, one by one:
- My Inbox: F0862
- My Situations: F4154
After finding the Tile + TM for My Inbox, select the row and click on Add TM Reference (text: Add Reference to Catalog).
On the Add Tiles/Target Mappings as Reference screen, Search for the catalog (Created in subset 8 above) i.e., ZC_MY_HOME, and click on the Add TM Reference button.
Repeat the steps for the My Situations: F4154 to add the Target Mapping to our catalog ZC_MY_HOME
Finally, you can assign this Catalog ZC_MY_HOME to our business role.

Navigate to the transaction code PFCG, Enter the Role name Z_MY_HOME click on Change.

In the Menu tab, Click on Insert Node button, choose SAP Fiori Launchpad and select Launchpad Catalog
Enter the Catalog name on the screen Assign SAP Fiori Launchpad Catalog and click Continue.
Finally Save your role, and you are done.
Assign the role to the desired user master record and you can see the My Home.

Note: Please ensure that sufficient Business Roles are added to the user and that these roles contain spaces and pages.

Becoming a SAP Fiori for SAP S/4HANA guru

You’ll find much more on our SAP Fiori for SAP S/4HANA topic page

Configuring SAP CI/CD pipeline for Deploying ReactJS application in Cloud Foundry

2024-05-07T09:59:07.961000+02:00

In this blog, we will discuss how to integrate SAP CI/CD pipeline for deploying ReactJS application on SAP Cloud Foundry environment.

You will learn,

How to create and build a ReactJS application.
How to configure and run SAP CI/CD Pipeline service.
How to create GitHub Webhook for automatically build, test and deploying the code changes.

Prerequisites

You have an SAP BTP Global or trial account.
Node installed in your system.
You have a GitHub account.

Setting up React Application

step 1: Create your react application using the create-react-app. The create-react-app is an excellent tool which allows you to create and run React project very quickly by wrapping all the required dependencies.

npx create-react-app reactcicd

step 2: To ensure that the application is running as expected, open the terminal and navigate to the application folder and type the below command. The application gets automatically hosted in the default server localhost:3000 and you’ll get the following screen.

npm start

step 3: Now create manifest.yml file for determining the Cloud Foundry app configurations and paste the below contents.

 ---
applications:
- name: your-app-name
path: build/
instances: 1
buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
memory: 256M

step 4: Build the application using the below command, you will see the build folder getting added to your project.

npm run build

Also create a Staticfile with the following content in the build folder as shown below

step 5: Now create a repository in your GitHub and push the changes. Make sure to remove build folder from the gitignore file since it is added default while creating the react project, we require it for deployment. For more details on how to deploy react application refer this link react-CF-deploy

Enable SAP Continuous integration and Delivery Service

step 1: Login into SAP BTP Cockpit and choose the subaccount to which you want to deploy your application.

step 2: Select Service Marketplace from the side pane and search for Continuous Integration and Delivery service. Click the create button.

step 3: Create popup will appear then choose the plan you want to and click create button at the bottom. Choose View Subscription and wait until the status changes to Subscribed.

step 4: Once the status is changed to subscribed navigate to Security → Role Collections from the left-hand pane. Choose role collection CICD Service Administrator and click edit.

step 5: Navigate to users section click edit then Add a new row in the Users section table, enter your user id, Keep the identity provider as default and click save.

Configure your credentials

step 1: Go to Services → Instances and Subscriptions from the pane. Choose the application icon located next to the Continuous Integration & Delivery subscription. Now we need to add credentials for GitHub, CF and Webhook.

step 2: Let’s first go with GitHub credentials. If your GitHub repository is private, you will need to provide with the necessary credentials to access it. You can skip this in case of public repository.

step 3: In Create Credentials popup make sure you give unique name within the subaccount. Select the type as basic authentication and provide your git credentials. Use personal access token as a password. Then choose create.

step 4: Now repeat the same steps for adding CF credentials. Here you have to provide your SAP BTP cockpit username and password.

step 5: For configuring webhook credentials change the type from Basic Authentication to Webhook Secret. Then generate the webhook secret copy it somewhere safe and finally choose Create.

Add a CI/CD job

step 1: Navigate to the Jobs tab and choose the icon to add a new job. Provide unique name for the job.

step 2: Click on the icon inside the Repository input field. You will get a popup then choose add repository., Enter your git repository clone URL. You can add any name of your choice. It need not to be matched with your repo. Choose your saved credentials for git and webhook.

step 3: For Branch, enter the GitHub branch of your repository from which you want to receive push events. In this example, master. Select Cloud Foundry Environment from the dropdown in the Pipeline field.

step 4: In the BUILD section choose npm as your build tool. For Build Tool Version, select the latest node version.

step 5: Under the Release section, switch on the execution of the Deploy to Cloud Foundry Space. Since we have already given name in the manifest file, we can skip the name field.

Replace the placeholders API Endpoint, Org Name and Space with the values in the Cloud Foundry environment to which you want to deploy. You can get the values from your subaccount overview in the SAP BTP cockpit.

step 6: For Deploy Type, choose standard and select your previously created CF credentials. Leave remaining fields default then finally choose create.

Create a GitHub Webhook

GitHub webhooks allow you to automate CI/CD builds. Whenever you push changes to your GitHub repository, a webhook push event is sent to the service to trigger a build of the connected job.

step 1: To create a webhook in GitHub, you need payload URL. Select your repository and choose Webhook Data from the right pane. You will see a below popup:

step 2: Now sign in into your GitHub account. In your project, go to the Settings tab.

step 3: From the left pane, choose Webhooks then Add webhook. Enter the Payload URL, Content type from the popup and the Secret that you had saved previously. For all other settings, leave the default values and add.

Verify your Build

You have to trigger your job manually the first time after creation.

step 1: In Jobs tab, select your job and choose Run. Verify that a new tile appears in the Builds view. This tile should be marked as running.

step 2: Wait until the job has finished and verify that the build tile is marked as successful.

step 3: Navigate to your space in the SAP BTP cockpit and check the list of installed applications. Now you can see your application got added.

step 4: Select your application and launch it with the application route. You can see the react application deployed.

You have now successfully created a CI/CD pipeline and deployed your ReactJS application to SAP BTP. From now on for every commit you can see the job getting triggered with commit id displayed under builds section.

Launchpad Property ID	Property Value
SPACES_CUSTOM_HOME	true
SPACES_CUSTOM_HOME_COMPONENT_ID	ux.eng.s4producthomes1
UI5_INSIGHTS	true

SAP Community - User Interface

Designing with Code (Part 3) – SAP Web Components

Web Components

Simple Prototyping Setup

Using Web Components

Properties

Slots

First Application Page

Layout

Summary and Outlook

Designing with Code (Part 4) - Data, Document Object Model, and Events

Application

Setup

Data

Defining the Model

Singleton

Copy vs. Reference

Summary

Document Object Model

Setting Element Properties

Accessing Element Methods

Adding and Removing Elements

Shadow DOM

Summary

Events

Button Event

Table Event

Summary

Summary and Outlook

Designing with Code (Part 5) - Team Player

Lowering Expectations

Overdo

One Step at a Time

Motivation

Summary and Outlook

What's a Great Information Experience for Users?

What is information experience?

Types of information

User interface text

User interactions

User assistance (aka "help")

Why is a good information experience important?

Let's check out this example

What do User Assistance Developers contribute?

Know your users

Integrate information

Introduce new features

Create content guidelines

Create task-based content

Provide solutions

The good, the bad, and the ugly

Workarounds to bad interface

Here are two workarounds to bad interface

So, what now?

Third party system approvals substitution to S4 System through interface

Introducing OpenUI5 2.x

Where is OpenUI5 today?

The next step: OpenUI5 2.x

The value of OpenUI5 2.x

Recommendation for moving from OpenUI5 1.x to 2.x

Call to Action

Design Systems: The Heart of SAP's User Experience

Create CBO (Custom Business Object) Tile using BAS in SAP UI5

What is CBO ?

What we can do in Custom Business Object:

Steps to create CBO tile in SAP BAS : 1. Launch the SAP Business Application Studio from the Cloud Cockpit

2. To create a Tile, select new Project from Template. --> Select Template and Target location.

Select the worklist type template.

3. Select the Data source, system and OData service.

4. Select the Entityset (Main Entity) and Navigation Entity (Navigation Entity: When you click on the table row, it will navigate to another page, where you can see the information of the selected row.)

5. Provide the required information for Project attributes and finish.

6. Run the Fiori app using command: npm run start

7. Deploy the CBO Tile :

8. how to create git repository and push the code on GIT.

Conclusion

** Team FPM ** How to render an FPM Overview Page to look like a SAP Fiori Object Page

The new Floorplan Modes

Navigation Bar

Getting Familiar with Spaces and Pages in SAP S/4HANA Cloud Public Edition

Switching from Groups to Spaces and Pages

Steps to create CBO tile in SAP BAS :
1. Launch the SAP Business Application Studio from the Cloud Cockpit

Team FPM How to render an FPM Overview Page to look like a SAP Fiori Object Page

Team FPM ABAP Push Channel for FPM Events - Enhancing the user experience with a delivery type