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
682

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
SumiKang
Product and Topic Expert
Product and Topic Expert
0 Kudos

Hi, @Dan_Wroblewski 

I couldn't have seen this feature for a while, Is this no longer available?

Thanks.

Dan_Wroblewski
Developer Advocate
Developer Advocate
0 Kudos

You mean my component or the ability to create your own component?

mihaly-toth-nc
Explorer

@Dan_Wroblewski 
I assume the question refers to the 'share' feature, which has been changed lately. 

I have noticed as well, that the components no longer generate a 'share token', however, a user can click now on the 'Copy to clipboard' which is essentially a share token that can be pasted into the marketplace and then the target component would be available for installation. 

mihalytothnc_0-1720180007171.png


NOTE: this seems to be working, however as soon as the copied component that the user wants to install has more complex internal logic (using flow functions from the marketplace) or uses other non-default components (e.g. iframe) then it will throw the following error on component install: 

mihalytothnc_1-1720180124310.png

So whenever you install a new component with the 'Copy to clipboard' method, make sure to have every used flow / component installed prior to adding the new component to the canvas. 

I am confident that this will be solved in a future release of the Composer, but it is important to know about this limitation before creating complex custom components with internal logic. I always strongly advise using the pure and default flow functions, but that cannot always be the case. 



Dan_Wroblewski
Developer Advocate
Developer Advocate

Thanks @mihaly-toth-nc 

Yes, the whole sharing of components has changed. You can also read about it here in the documentation: https://help.sap.com/docs/build-apps/service-guide/creating-and-editing-view-components?locale=en-US...

Essentially to create a component:

  • Create container and add all your component parts
  • Convert container to component
  • In By Me tab, click Copy to Clipboard for your component
  • Send the text to someone

Essentially to reuse a component:

  • Go to marketplace
  • Paste component text into the search field
  • Click Add to App -- now it appears in By Me tab and you can drag it in

This is the text of my component:

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

However, the layout and color did not keep when I pasted it in ... I need to figure out why. 

mihaly-toth-nc
Explorer
0 Kudos

@Dan_Wroblewski 
Well, the color and the layout could potentially be due to the difference in 'theme' settings as well as something else.
What is really important to watch out for is to only use flows and UI components that are 'default' in any application, else you will receive the 'missing component' and cannot be imported error as mentioned above.
That is particularly painful when you create a custom component that relies on 'set output value' flow functions.
One workaround for this is to use the custom JS whenever possible, or previously import all required dependency into the target app as well.