Introduction

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”:

The iFrame has two important properties: src and srcdoc. The first one allows you to embed an external page, while the second one takes HTML as input. For this guide and approach, we will be using only srcdoc by pasting custom code into it.

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.