Skip to Content
Technical Articles
Author's profile photo Kirill Leventcov

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

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.

 

Assigned Tags

      16 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      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.

      Author's profile photo Kirill Leventcov
      Kirill Leventcov
      Blog Post Author

      Hi,

      Yes, that's the exact roadmap item I was referring to. Thanks for linking it directly.

      Author's profile photo Mauricio Predolim
      Mauricio Predolim

      Giot Bill Have you seen this?

      Author's profile photo Fred Kuzyk πŸ…
      Fred Kuzyk πŸ…

      So then can one integrate this script from https://sweetalert.js.org/ with the inline frame and/or with the JS component?

      <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

       

      Author's profile photo Kirill Leventcov
      Kirill Leventcov
      Blog Post Author

      Yes, it's quite easy. Here's an example of a button that displays the alert on click! Done even without React:

      <button onclick=handleClick()>Click me!</button>
      <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
      <script>
          function handleClick() {
              swal("Here's the title!", "...and here's the text!");
          }
      </script>
      Author's profile photo Fred Kuzyk πŸ…
      Fred Kuzyk πŸ…

      The Inline Frame throws:

      Missing Comp: 0af404bf-aa2c-4369-ac74-90a4a09b73a3

      Author's profile photo Fred Kuzyk πŸ…
      Fred Kuzyk πŸ…

      So is Inline Frame working?

      Author's profile photo Kirill Leventcov
      Kirill Leventcov
      Blog Post Author

      Yes, the Inline Frame does work in SAP Build Apps at the moment.

      Author's profile photo Fred Kuzyk πŸ…
      Fred Kuzyk πŸ…

      Why am I seeing Missing Comp: 0af404bf-aa2c-4369-ac74-90a4a09b73a3 then?

      Author's profile photo Kirill Leventcov
      Kirill Leventcov
      Blog Post Author

      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.

      Author's profile photo Christian Witschel
      Christian Witschel

      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?

      Author's profile photo Kirill Leventcov
      Kirill Leventcov
      Blog Post Author

      I am referring to the Web Preview runtime, the iFrame works there.

      Author's profile photo Piotr Tesny
      Piotr Tesny

      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?

      Author's profile photo Piotr Tesny
      Piotr Tesny

      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.

      AUTHENTICATION REGION
      SAP Build Apps EU10
      RUNTIME VERSION
      4.9.73
      PARSER VERSION
      18.0.1
      Author's profile photo Kirill Leventcov
      Kirill Leventcov
      Blog Post Author

      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.

      Author's profile photo Piotr Tesny
      Piotr Tesny

      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:

      1. I'd be curious to see the pointer to a public React Native implementation of this component
      2. How can I know the iFrame load is complete ? I can see the onLoad and onError events. But would like to make an iframe visible only after its content has been fully rendered. This is to make use of the Conditional Renderer together with the Inline Frame.

      have a great day.