Get access to your phone features and apps from MaximoPlus

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