How to create native Maximo mobile application with MaximoPlus and React Native

Before we get started, make sure you installed the MaximoPlus server and all the dependencies as described in the MaximoPlus Server installation, or the MaximoPlus Server installation with Docker post. You also need the standard JavaScript tools - node/npm and yarn, and the Expo application (https://expo.io/learn) installed on your mobile or emulator.

If you want to try it out without installing anything,  checkout See MaximoPlus in action

First, install the Expo CLI and MaximoPlus CLI if not already installed:

npm install expo-cli -g
npm install create-mp-app -g

Run the following command, and then enter the required information:

create-mp-app

Follow the instructions from the console, and then open the Expo application on your device or emulator and scan the QR code to start your app.

So far, our app is just an empty shell.  Let's start adding some MaximoPlus components. We have first to define the Application Container. Containers are the bridge between your application and the MaximoPlus server. They send and receive data and function calls.

Add the following to the Containers.js file in the template:

export default props => (
  <>
    <AppContainer id="pocont" mboname="po" appname="po" />
  </>
);

The id attribute is the arbitrary identification of the container. You will reference it from the components that depend on the container.
Application Containers refer to the main Mbo of the Maximo application. In our example, we connect to the PO  app, and the name of its object is also PO.


When you enter your Maximo credentials in the login screen, you will come back to the empty template. Let us add the first screen. MaximoPlus uses the standard React Navigation library and its recommended location of the files. Create the POList.js file in the screens directory, and paste the following:

import React, { Component } from "react";
import NavigationService from "../navigation/NavigationService";
import MaxList from "../components/Mlist";

export default class extends Component {
  static navigationOptions = {
    title: "POs"
  };
  render() {
    return (
      <MaxList
        listTemplate="po"
        container="pocont"
        columns={["ponum", "description", "status"]}
        selectableF={_ => NavigationService.navigate("POSection")}
        norows={20}
        initdata={true}
      />
    );
  }
}

The container attribute refers to the PO Application container. With columns, we define the Mbo attributes we need from the PO. The norows specify the initial number of rows in the list, and the initdata tells the component to load the data automatically. The attribute selectableF is a function that will execute once the user taps on the list item, and after Maximo moves to that row. In most of the cases, it will open the new screen (like above).

To display something in the list, we have to define how the list render the list items Open the coponents/listTemplates.js  file and edit the entry for the po template:

  po: ({ DESCRIPTION, PONUM, STATUS }) => (
    <ListItem title={DESCRIPTION} subtitle={PONUM + " " + STATUS} />
  ),

Finally, we need to inform the React Navigation, about the location of our new file. Open the navigation/MainTabNavigation.js and add the following to the import section:

import POListScreen from "../screens/POListScreen";

Now, replace the existing list screen with this:

const ListStack = createStackNavigator({ List: POListScreen }, config);

If you tap on the list now, nothing will happen, because we still don't have the POSection screen. Let's fix that. Create the screens/POSection.js file, and paste the following:

import React, { Component } from "react";
import { Section } from "../components/Section";

export default class extends Component {
  static navigationOptions = ({ navigatiopn }) => {
    return {
      headerTitle: "Details"
    };
  };
  render() {
    return (
      <Section
        container="pocont"
        columns={[
          "ponum",
          "description",
          "status",
          "shipvia",
          "orderdate",
          "vendor",
          "vendor.phone",
          "revcomments"
        ]}
      />
    );
  }
}

The Section component displays the current row in Maximo. Let us add it to the React Navigation in MainTabNavigation.js.
Add to the following to the import part of the file:

import POSectionScreen from "../screens/POSection";

and then change the route:

const SectionStack = createStackNavigator({ Section: POSectionScreen }, config);

In the next post, you will learn how to add search and list functionality to your app.