I have been a fan of ReactJs for some time so far. I like the idea, that, as well as in K2, you can also create reusable components, even though the framework allows more customizations. K2 cannot be used to build single page applications, but nobody said it is not allowed to use ReactJs to create nice UI or layouts. In this post I will show you, how you can use ReactJs to build a masonry layout for images, stored in a SmartObject. The ReactJs component will get the images from K2 and render them in a nice responsive way. By the way, the approach is also suitable for K2 Cloud, where you cannot install any custom controls. So let’s go!
1. Prepare a K2 View
Since React by default selects an HTML element, inside which the full application is rendered, I added 2 literal Data Labels onto the SmartForm:
- react-control-js – will contain a script tag, which will load the bundle.js file, i.e. a built ReactJs app.
- react-control-root – will be used by React to render the masonry layout inside;
Meanwhile, I am not sure if it is possible to make an SMO call directly from the custom script in the DOM context. Therefore, I will use a List Display control, which will make an SMO call and receive all images, which in their turn will be later used by the React Component. But in order to be able to have the necessary data, you need to map IMAGE property of the SMO to both – Value and Display properties of the List Display control:
Our K2 view is almost ready, so we can move on to the React Application.
2. Create a React Application
I used one of the boilerplates, available on the Internet. You can see my example on GitHub – k2-react-control. Here are some important points to take into account, when creating the React Application.
Change the element, where our application should render.
In my code you can find this in the index.js file. I am searching for the ‘react-control-root‘ element render the React application there:
In the React application I am using ‘react-masonry-component‘, which was already built for a masonry layout of images.
I am using ‘xml2js‘ module to parse file RequestData, returned as XML, into JS object and extract the necessary properties.
This is the standard method from the React Component life-cycle. I am using it to do the following:
- Find the List Display control instance.
- Parse the data in order to extract requestData values.
- Save the extracted values in the Component state.
This method is also an integral part of every React Component. Here I am building an array of <img/> elements and render the Masonry layout. The interesting part is how the Image URL looks like. In my case it has the following format:
You can see in my code, how I am doing all of the mentioned above:
After the React application is ready, you need to build it in order to obtain 1 bundled js file.
3. Add ReactJs into K2
After I built everything, I committed all my code to GiHub, including the bundle.js file in the Public folder. With the help of a nice jsDelivr service, I can expose the bundle.js file as a CDN link . In my case it looks like this:
The last thing I need to do is to make sure the bundle.js is run only after our List Display control loads all Images from the SMO. For this I am creating an expression with the <script>…</script>:
And I am sending this expression into the literal ‘react-control-js‘ Data Label after the SMO call:
And finally, you can run the K2 view and/or the form with the ReactJs component and enjoy the result:
Check also my previous posts, so that certain steps can become more clear for you: