Learn how to create the custom components with ease. We demonstrate how to wire-in Google Maps (or Apple Maps) into MaximoPlus.

In this tutorial, we will create the component that adapts the existing React Native MapView component to display the locations of the work orders. I assume you don't have the Maximo Spatial installed, so we will put the geo-coordinates in a location description field, to illustrate the point.

The Component Adapter is a MaximoPlus tool we use to create the component. For example:

import {getComponentAdapter} from "mplus-react";

const TestComponent = getComponentAdapter(WrappedComponent);

WrappedComponent is a component that has the following properties, along with the properties passed to the TestComponent:

• maxrows - data fetched into Component Adapter
• fetchMore - function to get more data into ComponentAdapter
• setMaxRowValue - function to change the Maximo data for a given row and column.
• moveToRow - a function to change the current row of an MboSet

We use the above to bring the Maximo functionality to the component we adapt.

The resulting component, in our case TestComponent, has the following mandatory properties:

• container - The id of the container
• columns - The array of required columns
• norows - Initial number of rows in the component

Let's clarify it with an example.

First, we will create the Map component that displays the markers, and reacts when we tap on it.

import React, { useState, useEffect } from "react";
import MapView, { Marker } from "react-native-maps";
import getInitialCoordinates from "../utils/map.js";
import { StyleSheet } from "react-native";

const style = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject
  }
});
export default props => {
  const [region, setRegion] = useState(null);

  const asInitCoords = async props => {
    const coords = await getInitialCoordinates(props.coordinates);
    if (!region) {
      setRegion(coords);
    }
  };

  useEffect(() => {
    asInitCoords(props);
  });

  return (
    <MapView style={style.map} region={region}>
      {props.coordinates.map(marker => (
        <Marker
          key={marker.key}
          coordinate={{
            latitude: marker.latitude,
            longitude: marker.longitude
          }}
          title={marker.title}
          onPress={ev => props.handlePress(marker)}
        />
      ))}
    </MapView>
  );
};

We will not show the getInitialCoordinates function here for the sake of simplicity. The code above is almost the same as the official demo for the MapView . Check it out if in doubt.

With this  in hand, let us create the MaximoPlus component. As already discussed, we  use the DESCRIPTION field in the work order location to put the latitude and longitude.  The format is ##latitude,longitude##:

const regex = /##(.*),(.*)##/;
const WOMap = getComponentAdapter(props => {
  if (!props || !props.maxrows) return null;
  const { navigate } = useNavigation();
  const coords = props
    .filter(({ data }) => {
      const locDesc = data["LOCATION.DESCRIPTION"]; //required field for this to work
      return regex.test(locDesc);
    })
    .map(({ data, mxrow }) => {
      const locDesc = data["LOCATION.DESCRIPTION"];
      const [, latitude, longitude] = regex.exec(locDesc).map(parseFloat);
      return {
        latitude,
        longitude,
        key: data.key,
        title: data["DESCRIPTION"],
        rowNum: mxrow
      };
    });
  return (
    <View>
      <CoordsMap
        coordinates={coords}
        handlePress={({ rowNum }) => {
          props.moveToRow(rowNum);
          navigate("WOSection");
        }}
      />
    </View>
  );
});

The component extracts the list of coordinates from the work orders in the list that have it and pass it to the CoordsMap component that we created in the previous step. If the user taps on the map marker, it will navigate him to the section page, and change the current Maximo row.

Our component is ready to be used. Let us create the dialog:

const WOMapDialog = props => (
  <View
    style={{
      flex: 1,
      flexDirection: "column",
      justifyContent: "flex-end"
    }}
  >
    <WOMap
      columns={["wonum", "description", "location.description"]}
      container="wotrack"
      norows={50}
    />
  </View>
);

WOMapDialog.navigationOptions = ({ navigation }) => {
  const backButton = (
    <HeaderActionButtons
      buttons={[{ key: "close", label: "Back", action: closeDialog }]}
      icons={{ close: "md-arrow-back" }}
      style={{ color: "white" }}
    />
  );
  return {
    headerTitle: (
      <Text style={{ color: "white", fontSize: 18 }}>Workorder Mape</Text>
    ),
    headerTransparent: true,
    headerLeft: backButton,
    headerStyle: { borderBottomWidth: 0 }
  };
};

export default WOMapDialog;

And that's it! As an exercise, create the button on the section screen that opens this dialog, as described in  Calling Maximo Actions from MaximoPlus.

This post is the sixth in a series that started with https://maximoplus.com/blog/getting-started-with-maximoplus/ .

MaximoPlus supports the reading and writing of Maximo data in the offline mode. To enable the offline mode on the application, add the offlineenabled property on the application container, for example:

<AppContainer
  mboname="po"
  appname="po"
  id="pocont"
  offlineenabled={true}
/>

The app with the enabled offline mode will automatically set up the database on the device.

Try setting the property as above in your example application and then deactivate the network connection on your device (note: in Expo development mode, you need to connect your device via USB or run the app in Emulator). If you perform any change while in offline mode, the data changes will be sent automatically to the server once you go online again.

Offline Lists

MaximoPlus stores the list items to offline storage when you open the list. To pick the value from that list while offline, you need to specify the offlineReturnColumn attribute in the column's metadata. The offlineReturnColumn is a list column that will be copied from the list once the user picks the row.  Maximo does it automatically in the online mode, but we need to set it explicitly for the offline:

 metadata={{
          SHIPVIA: {
            hasLookup: "true",
            listTemplate: "valuelist",
            filterTemplate: "valuelist",
            offlineReturnColumn: "VALUE"
          }}

By default, MaximoPlus stores offline only the data that has been visited by the user. That means that if you opened the list while online, it would store just the rows you had seen on the list. If you want to store all the items from the list, you need to add the preloadOffline attribute in metadata:

 metadata={{
  SHIPVIA: {
    hasLookup: "true",
    listTemplate: "valuelist",
    filterTemplate: "valuelist",
    preloadOffline: "true",
    offlineReturnColumn: "VALUE"
  }
 }}

Be careful when using this option because a value list may contain a vast number of elements, and storing all of them offline will be a time-consuming process with an increased load on the server.

Preloading the offline data

If you have a use case that a user needs to have the complete set of data available offline, you need to use the preloadOffline API function. This function stores all the data defined by the filter criteria of the AppContainer and automatically loads the data for all the related containers as well. Here is the example of an action that preloads all the POs with the status WAPPR:

const preload  = () => {
  setQbe("pocont", "status", "wappr")
    .then(() => reload("pocont"))
    .then(() => preloadOffline());
};

This is the final post in the Getting Started series. Feel free to play with and make changes to the template, and let us know what you think.

Learn how to build the custom dialogs, process the workflow, and run Maximo actions from MaximoPlus.

This post is the fifth in a series that started with https://maximoplus.com/blog/getting-started-with-maximoplus/ .

Just like Maximo, MaximoPlus uses dialogs to execute the Maximo Actions that require user input. We will demonstrate the concepts you need to know on the example of the Change Status dialog, but the same is still applicable for the more complex cases.

First, let's see how to add the dialogs in the template. From the point of React Navigation, a dialog is a screen like any else. By convention, we define the dialog in the dialogs folder. Let us make the empty dialog first, and connect it to our app. Create the file POStatusHandler.js, and add the following:

import React,{PureComponent} from "react";

export default class extends PureComponent {
  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: "Change Status"
    };
  };
  render() {
    return (
      <>
      </>
    );
  }
}

Next, add the entry in the DialogStack const of DialogNavigation.js

 pochangestatus: { screen: POStatusHandler }

To open the custom dialog, we use the API function openDialog. Add the import openDialog from utils/utils.js to our screens/POSection.js screen.

In the same file, define the open dialog action:

const openStatusDialog = () => openDialog({ type: "pochangestatus" });

Following the steps from the previous blog post, add the button to the Navigation Header to execute that action. Now, let us add some logic to your dialog skeleton. Before we do that we need to  gloss over some important concepts:

RelContainer

The RelContainer is the Container defined on the Maximo relationship, as described in Maximo Database Configuration. For example, the following represents the Container on the MboSet set on the poline relationship of the posingle Container:

<RelContainer id="poline" container="posingle" relationship="poline" />

We know from our previous cases that the posingle Container is bound to the PO Maximo object. That means that our RelContainer links to the child of the poline relationship, which is a poline object. Once the parent container changes its current row, the data in the RelContainer is reloading.

Non-persistent Containers

In Maximo, most of the time, you need to specify the non-persistent MboSet before you can define the dialog for the action. Non-persistent MboSets are connected to the parent object using the Maximo Database Relationships. From the perspective of MaximoPlus, there is nothing special about the non-persistent containers; you need to use the RelContainer as well. For example, for the Container with the PO Status Change non-persistent MboSet, we define the RelContainer like this:

 <RelContainer
          id="pochangestatus"
          container="posingle"
          relationship="pochangestatus"
        />

We can now connect the section to the container:

<Section
    container="pochangestatus"	
    columns={["status", "memo"]}
/>

Mbo Commands

We have our Section connected to the Container now.  How does the user change the status once she fills in the data?

MaximoPlus Mbo commands execute the Java methods on the connected Mbo objects. You have two API functions at your disposal: mboCommand and mboSetCommand. The first executes the method on the current Mbo of the Container, while the latter runs the method on the MboSet bound to the Container. In our case we need the mboSetCommand:

mboSetCommand("pochangestatus","execute")

The full example:

import React, { PureComponent } from "react";
import { RelContainer, mboSetCommand, reload, save } from "mplus-react";
import HeaderActionButtons from "../components/HeaderActionButtons";
import { closeDialog } from "../utils/utils";
import { Section } from "../components/Section";

const changeStatusAction = async () => {
  await mboSetCommand("pochangestatus", "execute");
  save("posingle");
  closeDialog();
};

export default class extends PureComponent {
  static navigationOptions = ({ navigation }) => {
    const rightButtons = [
      { key: "ok", label: "OK", action: changeStatusAction },
      { key: "close", label: "Close", action: closeDialog }
    ];
    const headerActionButtons = <HeaderActionButtons buttons={rightButtons} />;
    return {
      headerTitle: "Change Status",
      headerRight: headerActionButtons
    };
  };
  render() {
    return (
      <>
        <RelContainer
          id="pochangestatus"
          container="posingle"
          relationship="pochangestatus"
        />
        <Section
          container="pochangestatus"
          columns={["status", "memo"]}
          metadata={{
            STATUS: {
              hasLookup: "true",
              listTemplate: "valuelist",
              listColumns: ["value", "description"]
            }
          }}
        />
      </>
    );
  }
}

Security

If you tried to change the status using the above dialog, you would've got the Access Denied Exception. The mboSetCommand attempts to run the Java code directly on the MboSet, so we need to protect our application via the security access check.

MaximoPlus uses the Maximo Security system to protect the application. However, protecting the individual method calls is not supported in the original Maximo Signature Security. MaximoPlus adds the additional security layer on top of Maximo Security, based on the following convention:

• The name of the option is the method name of Mbo or MboSet in upper case
• If the description starts with the hash (#), the description is the name of the relationship on which the method is called
• If there are more options with the same name (for example, more methods called execute on different relationships), you add the underscore and arbitrary symbol after it (example: EXECUTE, EXECUTE_1, EXECUTE_2...)

For our case, the name of the option will be EXECUTE, and the description #POCHANGESTATUS

Try to enter the above in Maximo Signature Security, assign the privilege to your group, and proceed with the status change.

Workflow

To route the workflow, you need to call the openWorkflowDialog API function, with the name of the Container and a workflow process name as arguments.

Example:

In the POSection.js screen, add the following action:

const openWF = () => openWorkflowDialog("posingle", "POSTATUS");

Now bind this action to the header button, as described in the previous blog post.

To learn how the Offline Mode works in MaximoPlus, read the next blog post.

Make a phone call, scan a barcode, upload the photo from a MaximoPlus app.

This post is a fourth in a series that started with https://maximoplus.com/blog/getting-started-with-maximoplus/.

Expo and React Native make accessing the phone API trivial. We will show here some built-in features in the MaximoPlus template and also demonstrate how to create your integration.

Phone calling

To enable the phone calling in MaximoPlus, add the metadata attribute phonenum to the field containing the phone number. For example:

  metadata={{
          "VENDOR.PHONE": { phonenum: true }
        }}

Try adding this metadata to the POSection.js file of your tutorial app

Barcode scanning

If you add the metadata attribute barcode on the attribute, the barcode icon for activating the barcode scan will be added next to the field, and the barcode value copied to the field upon the scanning. Try this artificial example in your app (don't forget to add the po9 field to the section columns first)

metadata={{
          "VENDOR.PHONE": { phonenum: true },
          PO9: { barcode: true, title: "Barcode test1" }
        }}

Take a photo and upload to Maximo

The upload will save your picture to the Maximo doclinks.  First, you need to import the utility function:

import {openPhotoUpload} from "../utils/utils";

This function has one argument - id of the application container where it should be uploaded.

In the example below, we will create one helper action and change the header to add the button for photo upload.

const takePicture = () => openPhotoUpload("posingle");

 const buttons = [
      { key: "save", label: "Save", action: saveAction },
      { key: "photo", label: "Photo", action: takePicture }
    ];
    const iconMap = { save: "md-save", photo: "md-camera" };

Document upload

You can also upload any document from your device (or Google Drive/Apple Cloud) in a similar vein:

import { openPhotoUpload, openDocumentUpload } from "../utils/utils";

const uploadDocument = () => openDocumentUpload("posingle");

 const buttons = [
      { key: "save", label: "Save", action: saveAction },
      { key: "photo", label: "Phot", action: takePicture },
      { key: "docupload", label: "Upload Doc", action: uploadDocument }
    ];
    const iconMap = {
      save: "md-save",
      photo: "md-camera",
      docupload: "md-attach"
    };

Document Viewer

Use document viewer to see the doclinks attachments:

import {
  openPhotoUpload,
  openDocumentUpload,
  openDocumentViewer
} from "../utils/utils";

const openDocViewer = () => openDocumentViewer("posingle");

 const buttons = [
      { key: "save", label: "Save", action: saveAction },
      { key: "photo", label: "Phot", action: takePicture },
      { key: "docupload", label: "Upload Doc", action: uploadDocument },
      { key: "docview", label: "View Document", action: openDocViewer }
    ];
    const iconMap = {
      save: "md-save",
      photo: "md-camera",
      docupload: "md-attach",
      docview: "md-document"
    };

Full example:

import React, { Component } from "react";
import { Section } from "../components/Section";
import HeaderActionButtons from "../components/HeaderActionButtons";
import { save } from "mplus-react";
import {
  openPhotoUpload,
  openDocumentUpload,
  openDocumentViewer
} from "../utils/utils";

const saveAction = () => {
  save("posingle");
};

const takePicture = () => openPhotoUpload("posingle");

const uploadDocument = () => openDocumentUpload("posingle");

const openDocViewer = () => openDocumentViewer("posingle");

export default class extends Component {
  static navigationOptions = ({ navigatiopn }) => {
    const buttons = [
      { key: "save", label: "Save", action: saveAction },
      { key: "photo", label: "Phot", action: takePicture },
      { key: "docupload", label: "Upload Doc", action: uploadDocument },
      { key: "docview", label: "View Document", action: openDocViewer }
    ];
    const iconMap = {
      save: "md-save",
      photo: "md-camera",
      docupload: "md-attach",
      docview: "md-document"
    };
    return {
      headerTitle: "Details",
      headerRight: <HeaderActionButtons buttons={buttons} icons={iconMap} />
    };
  };
  render() {
    return (
      <Section
        container="posingle"
        columns={[
          "ponum",
          "description",
          "status",
          "shipvia",
          "orderdate",
          "vendor",
          "vendor.phone",
          "po9"
        ]}
        metadata={{
          "VENDOR.PHONE": { phonenum: true },
          PO9: { barcode: true, title: "Barcode test1" }
        }}
      />
    );
  }
}

Make a new functionality using the metadata

MaximoPlus passes the metadata to every field of the section. We can use this feature to add the new phone integrations easily. You need to make changes to the components/section/TextField.js. We will not go in all the minute details of this class; we'll focus on the part utilizing the metadata. For example, the above phone calling metadata implements  as :

    if (this.props.metadata && this.props.metadata.phonenum) {
      const phoneF = () => Linking.openURL(`tel:${this.props.value}`);
      rightAction = { type: "font-awesome", name: "phone", onPress: phoneF };
    }

As an exercise, create the metadata that enable the SMS sending for the field.

In the next blog post, learn how to get more of Maximo functionality in MaximoPlus by using the MaximoPlus Actions

This post is a third in a series that started with https://maximoplus.com/blog/getting-started-with-maximoplus/.

We already mentioned that MaximoPlus access Maximo directly from its server. Saving the Maximo data may be an expensive operation in Maximo, so MaximoPlus don't do it automatically. We need to use the standard API save function from MaximoPlus.

To illustrate how the save works in MaximoPlus, we will create a save button on the toolbar of our section page.

First, add the save function to the import parts of the page:

import { save } from "mplus-react";

Then create a function to operate on the main po application container:

const saveAction = () => {
  save("pocont");
};

Finally, add the Save button to the header of the screen:

  static navigationOptions = ({ navigatiopn }) => {
    const buttons = [{ key: "save", label: "Save", action: saveAction }];
    const iconMap = { save: "md-save" };
    return {
      headerTitle: "Details",
      headerRight: <HeaderActionButtons buttons={buttons} icons={iconMap} />
    };
  };

Now, try to find some editable record in the list, change a value, and press the save button. What did happen? Our current record went back to the first item in the list.

To understand why this has happened, remember that Maximo resets the MboSet after the saving, and sets its current row to zero. To get a more Maximo-like behavior, we need to introduce the concept of the Single Mbo Container.

Single Mbo container is the container bound to the MboSet with exactly one Mbo, the current Mbo of the parent container. Edit the Containers.js file and add the following:

import { AppContainer, SingleMboContainer, RelContainer } from "mplus-react";
...
 <SingleMboContainer id="posingle" container="pocont" />

The container attribute of the SingleMboContainer is the parent MboSet. When the current row changes in the parent Mbo Set, the SingleMboContainer current Mbo changes. However, all the changes we do on the Single Mbo Container don't affect the parent container. Edit the container attribute of the section to posingle, and change the save action to :

const saveAction = () => {
  save("posingle");
};

The SingleMboContainer is a recommended way to operate on Maximo data. Some functions, like Maximo Status Change (more about that in another blog post), will not work as expected unless on SingleMboContainer.

In  the next post, learn how to access the smart phone features from MaximoPlus.

Use MaximoPlus to add search forms and utilize Maximo domains through a list of values.

This is a part two of series, please read first the https://maximoplus.com/blog/getting-started-with-maximoplus/.

Search is one of the basic functionalities in Maximo. In MaximoPlus, we use QBE Sections for that. They are entirely equivalent to the Advanced Search Forms in Maximo itself and use the same Maximo QBE (Query by Example).

Create the search screen in screens/POQbeSection.js file, and paste the following:

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

export default class extends Component {
  static navigationOptions = ({ navigation }) => {
    const buttons = navigation.getParam("qbeButtons");
    const iconMap = { clear: "md-close", search: "md-checkmark" };
    return {
      headerTitle: "Search POs",
      headerRight: <HeaderActionButtons buttons={buttons} icons={iconMap} />
    };
  };

  render() {
    return (
      <QbeSection
        container="pocont"
        columns={["ponum", "description", "status", "shipvia"]}
        navigateTo="List"
      />
    );
  }
}

Once you finished editing the new file, don't forget to change the MainTabNavigation.js to include it:

const QBESectionStack = createStackNavigator(
  { QBESection: POQbeSectionScreen },
  config
);

As you can see from above, the QbeSection component looks almost the same as the Section we introduced before. It has one new attribute, navigateTo where you specify which page should be open after the search finishes.

You can spot one more difference in the navigation options. QBE section renders two buttons in the navigation header: one for performing the search, and another for clearing the QBE. You can read more about navigation header buttons on https://reactnavigation.org/docs/en/header-buttons.html.

You can try to enter the search criteria as above and perform the search by clicking on the check icon.

Metadata

We need briefly to talk about metadata before we introduce the value lists. In MaximoPlus, metadata is information about the attributes of the Mbo: its label, data type, description, domain id. Most of the time, the metadata comes automatically from Maximo, and this is how the captions were displayed in the Qbe Section above, even though we didn't specify them.

In addition to the automatic metadata, we can add the metadata in the definition of the component. For example:

 render() {
    return (
      <QbeSection
        container="pocont"
        columns={["ponum", "description", "status", "shipvia"]}
        navigateTo="POList"
        metadata={{
          SHIPVIA: {
            hasLookup: true,
            listTemplate: "qbevaluelist"
          },
          STATUS: {
            hasLookup: true,
            listTemplate: "qbevaluelist"
          }
        }}
      />
    );

For this QBE Section, we appended the metadata attributes hasLookup and listTemplate to the attributes SHIPVIA and STATUS.

MaximoPlus template uses the metadata to customize any field behavior. The most important ones are the value lists.

Value Lists

The above example specifies the lookups on the SHIPVIA and STATUS fields of the QBE Section. If we define the hasLookup attribute, the Section adds the search to the text field. Since the value lists will show as lists in a separate screen, we need to define the listTemplate property as well. The valuelist and qbevaluelist are the built-in templates; you don't need to change the listTemplates.js file; this is for the reference only:

 valuelist: ({ VALUE, DESCRIPTION }) => (
    <ListItem title={VALUE} subtitle={DESCRIPTION} />
  ),
  qbevaluelist: ({ VALUE, DESCRIPTION, _SELECTED }) => (
    <ListItem
      title={VALUE}
      subtitle={DESCRIPTION}
      leftIcon={
        _SELECTED === "Y" ? <Icon name="check" type="font-awesome" /> : null
      }
    />
  ),

You can place the list of values on both the Section and the QbeSection. There is the difference in behavior, same as in Maximo: you can pick only one value for the Section, but you can choose multiple lines in Qbe Section for more complicated searches. That is the reason why we utilize the virtual field _SELECTED, it indicates when the user selects a row.

Change your POQbeSection.js file, as per the example in the metadata section, and try to search for multiple values:

Read the next post in the series to learn more Container concepts, and how to save the MaximoPlus data changes to Maximo.

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.

In this tutorial, we will create the very rudimentary React Native application - it will display the list of the POs in the WAPPR status, and if the user taps on the PO in the list, it will open the page with the PO details.

Install Expo

Expo is probably the easiest way to get started with the React Native.  Follow the instructions on https://docs.expo.io/versions/v33.0.0/introduction/installation/ and install the expo-cli on your computer, and the Expo application on your mobile device.

Use the expo init command to create the new project Choose the bare project template, without the tab or drawer navigation.

Basic structure

You can see the full source on: https://bitbucket.org/maximoplusteam/graphql-native-demo.git

As already discussed, our application will have two pages: one for the list of POs, and one for the details. We obviously need one more page for the login. For navigation between these pages, we will use the standard React Navigation library.

yarn add react-navigation

Create the file Main.js, it contains the app navigation logic:

import React, { Component } from "react";
import {
  createSwitchNavigator,
  createStackNavigator,
  createAppContainer
} from "react-navigation";
import LoginScreen from "./Login.js";
import ListScreen from "./List.js";
import DetailsScreen from "./Details.js";
import NavigationService from "./NavigationService.js";

const AppStack = createStackNavigator({
  List: ListScreen,
  Details: DetailsScreen
});

const AuthStack = createStackNavigator({ Login: LoginScreen });

const AppContainer = createAppContainer(
  createSwitchNavigator(
    { App: AppStack, Auth: AuthStack },
    { initialRouteName: "App" }
  )
);

export default class App extends Component {
  render() {
    return (
      <AppContainer/>
    );
  }
}

In this phase, we will not introduce the GraphQL yet, but we need the dummy pages to check is our navigation working correctly or not.

List.js:

import React from "react";
import { View, Text, Button } from "react-native";

export default props => (
  <View>
    <Text>List</Text>
    <Button onPress={props.navigation.navigate("Details")} />
  </View>
);

Details.js:

import React from "react";
import { View, Text} from "react-native";

export default props => (
  <View>
    <Text>Details</Text>
  </View>
);

Login.js:

import React from "react";
import { View, Text } from "react-native";

export default props => (
  <View>
    <Text>Login</Text>
  </View>
);

Finally, edit the App.js that was created during the project init.

import React from "react";
import Main from "./Main";

export default function App() {
  return <Main/>;
}

Test the application by running the yarn start.

Adding the GraphQL logic

So far, our application didn't do anything except navigating the empty pages. We will use Apollo Client library to connect the app to the GraphQL server. We also need to install the react-native-elements library,  and use its ready-made components:

yarn add react-native-elements apollo-cache-memory apolo-client apollo-link apollo-link-context apollo-link-error apollo-link-http base-64 graphql graphql-tag react-apollo react-scripts

Apollo Client is using the mechanism called "Links" to communicate with the GraphQL servers. GraphQL server for Maximo uses the Basic HTTP authentication, and it expects the standard base64 encoded authorization token, together with the API request. Our login page will store the token in the AsyncStorage (React Native default storage mechanism), and the link will read it from there and send with every request.  We also need to navigate to the login page if there is no token. The file containing the link logic is GraphQLLink.js:

import NavigationService from "./NavigationService.js";
import { ApolloClient } from "apollo-client";
import { ApolloProvider } from "react-apollo";
import { HttpLink, createHttpLink } from "apollo-link-http";
import { ApolloLink } from "apollo-link";
import { onError } from "apollo-link-error";
import { InMemoryCache } from "apollo-cache-inmemory";
import { setContext } from "apollo-link-context";

//import AsyncStorage from "@react-native-community/async-storage";
import { AsyncStorage } from "react-native";

const httpLink = createHttpLink({
  uri: "http://192.168.1.107:4001/graphql",
  credentials: "include"
});

const authLink = setContext(async (_, { headers }) => {
  // get the authentication token from local storage if it exists
  //  const token = localStorage.getItem("token");
  const token = await AsyncStorage.getItem("token");
  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,
      authorization: token ? `Basic ${token}` : ""
    }
  };
});

const errorHandlerLink = onError(({ response, networkError }) => {
  if (networkError) {
    if (networkError.statusCode === 401) {
      AsyncStorage.removeItem("token");
      NavigationService.navigate("Login");
    } else {
      NavigationService.navigate("Error", { error: networkError });
      //display the error (for example network error)
    }
  }
});

export default new ApolloClient({
  link: errorHandlerLink.concat(authLink).concat(httpLink),
  cache: new InMemoryCache()
});

In the snippet above, replace the URI of the HTTP link with the IP address of your computer.  The above link uses the NavigationService.js to navigate to the login page in case of the wrong username and password. Below is its source code:

import { NavigationActions } from "react-navigation";

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params
    })
  );
}

// add other navigation functions that you need and export them

export default {
  navigate,
  setTopLevelNavigator
};

We have everything ready now to create our first GraphQL - powered component. Change the List.js to following:

import React, { Component } from "react";
import { View, Text, FlatList } from "react-native";
import gql from "graphql-tag";
import { Query } from "react-apollo";
import styles from "./Styles.js";
import { ListItem } from "react-native-elements";

const poQuery = gql`
  query($qbe: POQBE) {
    po(fromRow: 0, numRows: 20, qbe: $qbe) {
      ponum
      description
      status
      purchaseagent
      vendor
      receipts
      totalcost
      id
      _handle
      
    }
  }
`;

const qbe = { status: "=WAPPR" };

const POList = props => (
  <Query query={poQuery} variables={{ qbe }}>
    {({ loading, error, data }) => {
      if (loading) return <Text styles={styles.text}>Loading...</Text>;
      if (error) return <Text styles={styles.text}>Error :(</Text>;
      return (
        <FlatList
          data={data.po}
          keyExtractor={item => item.id}
          renderItem={({ item }) => (
            <ListItem
              title={item.ponum}
              subtitle={item.description}
              onPress={() =>
                props.navigation.navigate("Details", { data: item })
              }
            />
          )}
        />
      );
    }}
  </Query>
);

export default POList;

The poQuery const is the actual GraphQL query. It has one variable $qbe, that we use to limit the results to WAPPR POs. You can try out this query in the GraphQL playground, before running this app. The Apollo client Query component feeds the result data to React Native's standard FlatList component. The ListItem is a component from the react-native-elements library with the pre-defined styling. Note that there is no usage of the Apollo link we defined in the GraphQL.js. How then Apollo client runs the query?

Connecting to the actual Apollo HTTP link is the rule of the ApolloProvider. Typically, this is a root component that provides the connection to all the nested queries and mutations. Change the App.js to following:

import React from "react";
import { ApolloProvider } from "react-apollo";
import Main from "./Main";
import client from "./GraphQLLink";

export default function App() {
  return (
    <ApolloProvider client={client}>
      <Main />
    </ApolloProvider>
  );
}

Finally let's create the Details.js :

import React, { Component } from "react";
import { View, Text } from "react-native";
import { Input, Button } from "react-native-elements";

class Details extends Component {
  constructor(props) {
    super(props);
    this.state = props.navigation.state.params.data;
  }
  render() {
    return (
      <View>
        <Input lebel="PO" value={this.state.ponum} editable={false} />
        <Input label="Status" value={this.state.status} editable={false} />
        <Input
          label="Buyer"
          value={this.state.purchaseagent}
          editable={false}
        />
        <Input label="Vendor" value={this.state.vendor} editable={false} />
        <Input label="Receipts" value={this.state.receipts} editable={false} />
        <Input
          label="Total Cost"
          value={this.state.totalcost && String(this.state.totalcost)}
          editable={false}
        />
        <Button
          title="Workflow"
          onPress={() => this.props.navigation.navigate("Workflow")}
        />
      </View>
    );
  }
}

export default Details;

Notice that the Details page is not connected to the GraphQL data. Our application uses the React Navigation mechanism to pass the data from the List.js page. We are using the state instead of props here so that you can change the data through the mutation to the server if you want (Not covered in the tutorial). The button at the end of the form doesn't do anything yet. To see it in action, read the next blog post: React Native Workflow Routing with GraphQL Server

If you ever configured AppDynamics to monitor the Maximo performance, you must have noticed that it is not apparent which Maximo application generates the load. I will demonstrate the easy way to setup AppDynamics to get the most from the Maximo performance data.

One of the most useful features in AppDynamics is the concept of the business transactions, that is an end to end performance metrics for specific actions performed by the user. For very complex systems like Maximo it is impossible to cover all the possible business use cases. It would be good, though if it were possible to get the performance metrics breakdown by the Maximo application. In the picture below, you see the performance metrics coming from different Maximo applications: rfq, pr, wotrack, plusgptw_g, inventor, item...

Take a look at the following network request coming to Maximo:

When the user navigates to the new application in Maximo, the application name is sent to the Maximo server.  We will use this fact to create the cookie that stores the application name between the requests and use this cookie to get the business transactions in AppDynamics. We use the Servlet Filter for that purpose:

package custom.webclient.servlet;

import javax.servlet.*;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * The filter should add the custom cookie once the app load event comes (i.e. the new app is loaded)
 * The purpose of that is to separate business transactions in AppDynamics
 */
public class AddCookieFilter implements Filter {

    @Override
    public void destroy() {

    }

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        final String event = servletRequest.getParameter("event");
        final String value = servletRequest.getParameter("value");
        if (event == null || value == null || !event.equals("loadapp")) {
            filterChain.doFilter(servletRequest, servletResponse);
            return;
        }
        Cookie appCookie = new Cookie("maximoapp", value);
        appCookie.setPath("/");
        ((HttpServletResponse) servletResponse).addCookie(appCookie);
        filterChain.doFilter(servletRequest, servletResponse);
    }
}

Don't forget to define the filter in web.xml:

<filter>
	  <filter-name>AddCookieFilter</filter-name>
	  <filter-class>custom.webclient.servlet.AddCookieFilter</filter-class>
</filter>

and configure where it is used(also in web.xml):

<filter-mapping>
		  <filter-name>AddCookieFilter</filter-name>
		  <url-pattern>/ui/*</url-pattern>
</filter-mapping>

When restarting the application, make sure the cookie is set:

In the AppDynamics Instrumentation define the new Transaction Detection:

Within several minutes, you will have the business transactions data coming to AppDynamics.

Use Docker to easily install and manage your MaximoPlus Server.

If you have been installing MaximoPlus Server, you know that the installation process is straightforward: download, unzip, run the prepare  script and finally start the server. While this is still a fast and viable option, you may want to consider running the MaximoPlus server in the Docker container.

Why use Docker for MaximoPlus?

First of all, you don't need to worry about the Java and OS versions. The MaximoPlus process runs isolated in the container.  You can run smoothly many Docker container instances in parallel without having to change the ports in the configuration file. If you have any changes in Maximo, deploying them in MaximoPlus means just creating a new instance of MaximoPlus Docker container. Finally, Docker containers are immutable, and you can run many Docker instances with the different versions of Maximo application, simply create the new instance when you want to test some change.

Installation

To install the MaximoPlus Docker container, do the following:

• Create a new directory
• Copy the maximo.ear and optionally maximo.properties file inside it
• Create the file named Dockerfile, and paste the following snippet inside

FROM maximoplus/maximoplus-server
WORKDIR /mp
COPY maximo.ear .
RUN /mp/prepare.sh inst maximo.ear
RUN rm /mp/maximo.ear
RUN cp startdocker.sh deployment/inst/
COPY . deployment/inst/
WORKDIR /mp/deployment/inst
CMD ./startdocker.sh
EXPOSE 8080

Now build the image:

docker build -t maximoplus_image1 .

Run the MaximoPlus server and expose port 8080 to Docker instance:

docker run --name maximoplus-instance -d -p 8080:8080 maximoplus_image1

Once you have the server up and running, it is time to create your first MaximoPlus app.

We will describe here how to install the free development version of GraphQL Server for Maximo. It is the same as a production one, just limited to five concurrent users.

Prerequisites

• Git
• docker
• docker-compose
• Working maximo.ear file

Installation

First, clone the server template with git:

git clone https://bitbucket.org/maximoplusteam/graphql-server-template.git

Go to the graphql-server-template directory. Copy the maximo.ear file inside the folder. Make sure that the db.url in maximo.properties inside the ear file point to the IP of the network adapter, not to the localhost. You may optionally put the maximo.properties file inside the directory as well, it will override the one from the ear file. If you are using Windows, open the docker-compose.yml file, and put the full path of the schema directory in the source property.

You are ready now to create and start the server. Open your shell or command prompt in graphql-server-template directory and run:

docker-compose up -d

To verify the installation run:

docker-compose logs -f

Try it out

GrapqQL Server is built upon the Apollo GraphQL server, and comes with its GraphQL Playground. Open the browser and navigate to http://localhost:4001/graphql, and then enter the credentials of a Maximo user. If you click on the SCHEMA button, you can see there are already some types defined in the schema. GraphQL server reads all the schema definitions from all the files inside the schema directory, and automatically exposes the types and creates the resolvers.

Now let's run our first query:

query {
  po(fromRow:0, numRows:2){
    ponum
    description
    id
  }
}

Where to go from here?

If you want to start learning how to write Maximo  types, queries and mutations in GraphQL SDL,  then immerse yourself in our manual. If you feel you would like to see how GraphQL works in action, read our next blog post: Simple React Native application with GraphQL for Maximo.

Is your company in the process of migrating(or considering it) from isolated applications architecture to the open API? If the answer is yes, then choosing the GraphQL instead or REST might be the right choice for you. The benefits of GraphQL over REST are numerous, and we will not repeat them here, you may find many resources online (for example, Top Five Reasons to use GraphQL).

GraphQL suits Maximo naturally

The basic building blocks of Maximo are its business objects (Mbos),  business objects fields, and the relationships between them. If you have even the slightest idea about the GraphQL, you can easily spot the similarities: Mbos - object types, Mbo fields - object fields, and the relationship - nested object types.

Why GraphQL server for Maximo?

The GrapqhQL Server for Maximo requires no programming at all. You simply define the schema in the GraphQL schema definition language (SDL), and the server automatically creates the resolvers. The server covers the complete  Maximo functionality: you can use the GraphQL mutations to change the data, route the workflow, or execute any action available in Maximo (for example: change the status, change the balance of item inventory, create RFQ from PR...)
Want to try it out? Check out the documentation, or the next blog post - Installing GraphQL server for Maximo