Building a pluggable widget URL Image Viewer

Building a pluggable widget — URL Image Viewer

A short piece on how to make a URL Image viewer pluggable widget for native mobile using Mendix and React.js

Before we get started

While it is not necessary to be an advanced JavaScript developer for this tutorial, it is advised you have at least some JavaScript or React.js skills or experience. Additionally, you should be familiar with Mendix and how to develop applications for native mobile in Mendix studio pro.

Finally, you should have some understanding of developing widgets, but if you do not here is a short tutorial piece you can complete before proceeding, which will get you up to speed on the basics (Build a Pluggable Web Widget: Part 1)

Step 1 — create the widget using the widget generator

Open the terminal or command line and navigate to your app project’s directory and enter the commands needed to create the folder CustomWidgets and then create the widget folder structure inside that

$ mkdir CustomWidgets
$ cd CustomWidgets
$ yo @mendix/widget URLImageViewer

The widget builder will guide you through the creation of the widget, just enter your details. For programming language I chose Javascript, and I chose to use the widget template. You can decide if you want to add unit tests and end to end tests, but its not necessary and I didn’t do it.

Step 2 — change the widget XML structure

In order to access the String URL, we want to pass as a parameter, we need to change the XML in order to add it as an attribute in the widget.

Navigate to the file UrlImageViewer.xml and create your property, here is how I create the variable URL with attribute type String.

Step 3 — add your imports

Now we need to import some react-native libraries. Navigate to UrlImageViewer.jsx and add the following import for view, image and stylesheets from react native.

Javascript imports

Step 4 — databinding/connect parameters to variables

Still in URLimageViewer.jsx we need to bind create the variable URL and bind it to our parameter attribute.

This is done by adding the following line to the widget's constructor:

URL = this.props.URL.value

So that the constructor looks like this :

The widget’s constructor function

Note I also kept the widget templates onClickHandler, so that the widget can still trigger a nanoflow when clicked.

Step 5 — create the render() method

Finally, we have to create the render function of the widget. The render () function has a return statement containing some JSX markup. This is quite a simple widget, it just renders Image. However, you can’t just return the image, React throws an error and suggests wrapping the multiple DOM elements into one root DOM element.

This is why we added the import for View from react-native.

The widget’s render function

Step 6 — adding some styles

At this point, you can almost try testing the widget, but let's add some styles to the component before we do. We already added the import for Stylesheet earlier, so in the same file (URLimageViewer.jsx) outside of the class, URLImageViewer create a constant called styles.

We can add a class .logo to styles, and set a width and height for the images.

Stylesheet

Step 7 — testing the widget

Going back to your terminal or command prompt, enter the command npm start. This will initiate the build process which bundles your code and creates a copy of the widget in your Widgets folder. Look out for any build errors preventing your widget from being bundled.

Now in Mendix Studio Pro, go to the project and click synchronize directory (or press F4).

The widget should now be available in your toolbox for native mobile pages.

You will need to place the widget inside of a dataview or list view connected to an entity that contains the string URL attribute you wish to load.

Run it locally in Mendix studio pro and then use the Make it Native app to log in and test the widget.

Step 8 — be amazed

If the Images loaded when you navigated to the page and there are no errors in the console, you’ve done it. If this is your first pluggable widget, then well done.

You could continue to develop this widget even further by adding design properties and more to it.

What widget would you like to read about next? Submit your ideas for pluggable widgets to me on LinkedIn or the Mendix community slack channel

Full widget code

import { Component, createElement } from "react";
import React from 'react';
import { View, Image, StyleSheet } from 'react-native';
export class UrlImageViewer extends Component {
constructor(props) {
super(props);
URL =  this.props.URL.value
this.onClickHandler = this.onClick.bind(this);
}
render() {
return (
<View>
<Image style={styles.logo} source={{uri: URL}}/>
</View>
);
}
onClick() {
if (this.props.onClickAction) {
this.props.onClickAction.execute();
}
}
}
export const styles = StyleSheet.create({
logo: {
width: 80,
height: 60,
},
});

References

Image · React Native

Pluggable Widgets API - APIs & SDK | Mendix Documentation

Build a Pluggable Web Widget: Part 1 - Studio Pro 8 How-to's | Mendix Documentation

Build a Pluggable Web Widget: Part 2 (Advanced) - Studio Pro 8 How-to's | Mendix Documentation