SAP Builders Blog Posts
Learn from peers about their low-code journey and write your own blog posts to share your thoughts and experiences as you become an SAP Builder.
cancel
Showing results for 
Search instead for 
Did you mean: 
Dan_Wroblewski
Developer Advocate
Developer Advocate
683

See all 3 parts of the custom component series:

Both the tooltip and Fiori dialog are available for use now.

We started by taking a blank project and adding the following components:

  • Container (this we need because all custom components need to be housed in a container)
  • Icon (users will click this to show the tooltip)
  • Container (this will be the background of our tooltip)
  • Text (this will be the tooltip)

Select the icon component and change the icon to display the information Fiori icon.

dan_wroblewski_7-1702199388449.png

For the inner container, set the spacing:

  • Width should be set under Custom, with Fit content and minimum 150 pixels, maximum 250 pixels. The height and width should be Fit Content
  • Position should be absolute, with an indent of 24 pixels, and a Z-index of 10 (click Set to Number and then type in 10) so it displays on top of any other components.
  • Under Style, set the padding to 4 pixels on all sides. You can also set a shadow if you want.
  • And we want to show the container only when the user clicks the button, so under Properties → Advanced Properties → Visible, we bind the visibility to the ShowInfo private variable.

dan_wroblewski_8-1702199528336.png   dan_wroblewski_9-1702199568741.png

dan_wroblewski_0-1702200083267.png

For the Text component, we need to also set the width to Custom, and select Fit Content and minimum of 150 pixels and maximum to 250 pixels. The height should be Grow to height.

dan_wroblewski_4-1702201847391.png

And we need to bind the Text component's Content property to our custom component's Text property, so developers can set the text.

dan_wroblewski_2-1702201368952.png

The property appears under Composite component internal property.

dan_wroblewski_3-1702201405429.png

You can also set the color of the icon, text container, and text.

Assign Logic

Now we want the tooltip to appear when the user clicks the icon, and disappear on another click. We will also make the text disappear automatically after 5 seconds.

In the Component Template Editor for the custom component, add a set private variable flow function, and set our ShowInfo private variable to a formula to toggle its state:

 

 

!privateVars.ShowInfo

 

 

You can now save the project and test the component. If you click the icon, you should see the tooltip with default text.

Let's add the feature to automatically hide the tooltip after 5 seconds. We add the following:

  • If condition, to test if the tooltip is still visible.
  • Delay, to delay 5 seconds if the tooltip is visible.
  • Set private variable, to turn our private variable to false.

dan_wroblewski_1-1702200809413.png

Publishing the Component

The component you created is under the By Me tab (where the components are shown), which shows the custom components you have modified. This new component will only be in your project. If you want to share or reuse, click the 3 dots and select Publish to marketplace.

dan_wroblewski_0-1702202534869.png

Then select Publish New. This makes it available to any user in your BTP landscape (e.g., eu10).

dan_wroblewski_2-1702202623143.png

You will get an alert with the token for finding your component in the marketplace. Save this token.

dan_wroblewski_0-1702284277842.png

The component is now removed from the By Me tab and moved to the Installed tab.

dan_wroblewski_4-1702202815283.png

The component can be found in your subaccount by searching for the title or description. Any other user in the BTP landscape will need the token.

Using the Component

Let's say we had a UI with 2 buttons and we wanted to put the tooltip in the middle.

dan_wroblewski_0-1702203021864.png

We can click on Marketplace.

dan_wroblewski_1-1702203075077.png

Enter the token, and the component is displayed.

dan_wroblewski_2-1702203131509.png

Click on the component, and click Install. It will be in the Installed tab.

Now drag a copy of the component between the buttons. 

dan_wroblewski_3-1702203271186.png

With the tooltip selected, in the Properties tab, add some text. I added this using a formula (if you add as plain text, the slashes will be escaped). You can use the Unicode characters to add spacing or special characters.

 

 

"This is the first line of the tooltip. \u000A\u000A This is the second line of the tooltip."

 

 

If you preview the app, you will see that it creates a lot of extra space, and the tooltip is masked by the container in the app.

dan_wroblewski_4-1702203496712.png

So you must do the following:

  • For the container holding the buttons and the tooltip, set LayoutLayout → Clip overflowing content to No.
  • For the tooltip component, set Layout → Width and Height to Fit content.
  • For the tooltip component, set Layout → Position → Z-index to 10.

And now run the app again, and click the icon.

dan_wroblewski_5-1702203729490.png

 

 

5 Comments