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: kirill_l#content:blogposts.
- SAP Managed Tags:
16 Comments
