Technical Articles
Embed React Components to SAP Build Apps
Introduction
SAP Build Apps has seen an incredible growth and transformation of the industry. It has enabled businesses and individuals to build powerful applications without the need for extensive coding knowledge. However, sometimes, you may find yourself in a situation where you need to implement a specific feature or functionality that’s not available out-of-the-box within SAP Build Apps. This is where the ability to embed custom code can be a game-changer.
In this tutorial, we’ll explore how to embed custom React components into SAP Build Apps, extending its capabilities and allowing you to create even more robust applications. By integrating custom components, you can leverage the power of React while still enjoying the simplicity and efficiency of developing with SAP Build Apps.
Disclaimer: The method outlined in this tutorial is experimental, and I would advise against using this in production. Keep up with the roadmap for an official implementation of this feature.
Implementation Design
SAP Build Apps has recently released an Inline Frame (iFrame) component that allows us to embed an external website or HTML into the application. You can install it from the Marketplace by searching for “inline frame”:
Try inputting the following HTML code into the srcdoc field:
<h1>Hello</h1><h3>world</h3>
If you preview the app, you will notice that the HTML has rendered successfully:
With basic HTML markup seemingly supported, we can start experimenting with the <script>
tag. Try inputting the following code:
<button onclick=handleClick()>Click me!</button>
<script>
function handleClick() {
alert("You clicked!")
}
</script>
You will now see a button that outputs a custom message once clicked, meaning that JavaScript is supported as well:
Finally, we can use <script>
‘s src
attribute to import JavaScript from external resources. We can use a Content Delivery Network (CDN) to import a hosted version of React and use it in our code. We will also use BabelJS to write modern JavaScript without compatibility issues. With that, our list of imports will look the following way:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.21.4/babel.min.js"></script>
Always check cdnjs.com for latest versions.
Hello World
Let’s write a simple “Hello world!” component that will display a static text. All React code is written within the last <script>
tag. We are going to use React Class Components that contain the component within render(){return <div></div>}
structure, but you can use function components as well. Find the code below:
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.21.4/babel.min.js"></script>
<script type="text/babel">
class Greeting extends React.Component {
render() {
return (<p>Hello World!</p>);
}
}
ReactDOM.render(
<Greeting />,
document.getElementById('root')
);
</script>
The core of this design is represented in a fact that we define a new empty <div>
tag with id="root"
and render a component inside of it, written entirely in React.
Using React Hooks
Going further, we can utilize more features of React and make the component entirely interactive by using the state hook:
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.21.4/babel.min.js"></script></script>
<script type="text/babel">
class Greeting extends React.Component {
state = {
total_clicks: 0,
};
add = () => {
this.setState({
total_clicks: Math.random(),
});
};
render() {
return (
<div>
<h2>Clicks: {this.state.total_clicks}</h2>
<button onClick={this.add}> Click here! </button>
</div>
);
}
}
ReactDOM.render(<Greeting />, document.getElementById("root"));
</script>
This component should randomize the displayed number every time you click the button.
Conclusion and Further Guidance
In conclusion, we have learned to integrate custom React Components to SAP Build Apps. This method should open the door to more possibilities for creating your application. Even though this is nowhere near the actual feature, I encourage you to experiment, explore, and build upon the knowledge acquired in this guide to create whatever you desire.
Can I say that this method can integrate any React Widget to SAP Build Apps?
.
.
.
Probably. But this might not work without you rewriting and debugging the major part of the code. That is why, for production purposes, it is vital to wait for the official implementation.
πΒ Stay tuned for more and check out my other blogs: click.
Hi Kirill,
I guess the preferred approach for production purposes would be to embed custom components via a native SDK rather than using iFrames.Β Is this what is intended with the Third-party extensions to enhance the functionality of apps developed with SAP Build Apps roadmap item?
Regards,
Mustafa.
Hi,
Yes, that's the exact roadmap item I was referring to. Thanks for linking it directly.
Giot Bill Have you seen this?
So then can one integrate this script from https://sweetalert.js.org/ with the inline frame and/or with the JS component?
Yes, it's quite easy. Here's an example of a button that displays the alert on click! Done even without React:
The Inline Frame throws:
So is Inline Frame working?
Yes, the Inline Frame does work in SAP Build Apps at the moment.
Why am I seeing Missing Comp: 0af404bf-aa2c-4369-ac74-90a4a09b73a3 then?
Are you seeing this on mobile? The mobile runtime version has not been updated yet, so the Inline Frame is not available there. But it does work on Web.
On SAP Build there is no mobile runtime available at the moment, neither Android nor iOS app can be build. Only Web Apps. So, the error message has to come from the Web version.
For me iFrames also do not work... Which web runtime version are you referring to?
I am referring to the Web Preview runtime, the iFrame works there.
Hello Fellow Readers,
Worth mentioning is the Inline Frame component for web has been made available with SAP Appgyver community edition as well, I have even created and shared on a marketplace a container component that makes it easy to use it...
kind regards
PS. Kirill Leventcov ;
I have noticed that SAP Appgyver community edition and SAP Build Apps marketplaces are separate entities. Is there a way to export a component from a community marketplace into the build apps one?
Hello Kirill Leventcov
SAP Build Apps: trying to set a Title property value to an Inline Frame component, that does not seem to work. Neither in preview nor after export. Am I missing something ? kind regards; Piotr
PS.
Hi,
As seen from the Title's tooltip, the text you input will be available for on-screen readers only. You can try adding a value to the Title and then inspecting the preview via the browser tools. You'll see your input in the "title" HTML property of the inline-frame.
Thank you Kirill Leventcov
Indeed the Inline Frame component behaviour is as described here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
I have two asks:
have a great day.