Sync Nintex Forms with SAP using JavaScript (SAP Material Data)

The following article shows how to synchronize a Nintex form for Office 365 with SAP using custom JavaScript.
In the depicted scenario, SAP data is made available in a Nintex form for data selection in dropdown lists using JavaScript and REST services.

For more information on Nintex form for Office 365, see Nintex Documentation: Office 365 Forms.

About

This article leads you through all necessary steps to set up the following process in Nintex for Office 365:

• When an SAP material number is entered in an input field, the possible hits are displayed in a dropdown list.
• If a material is selected in the drop-down list, the material text is displayed in a text field.
• When the input is confirmed, the selected material is written to SharePoint.

Setup in yunIO

yunIO is the connector that reads and writes data from and to SAP. For more information on yunIO, see Theobald Software: yunIO.

1. Create an SAP connection in yunIO.
2. Create a service in yunIO. The depicted example uses the integration type SAP Table or View for the service.
3. Look up the table MAKT that contains material descriptions.
4. Select the columns MATNR, SPRAS and MAKTX for the output of the service.
   
5. Click to testrun the service in yunIO . For more information, see Documentation: Run Services in yunIO.
6. Click to download the service definition .
   

Setup in SharePoint

In the depicted example, SAP materials are added to a custom SharePoint list via a Nintex form:

1. Create a SharePoint custom list with a column "Material".
   
2. Click [Nintex Forms] to create a new Nintex input form for the SharePoint custom list, see Setup in Nintex for Office 365.

Setup in Nintex for Office 365

Follow the steps below to set up the Nintex form for the SharePoint custom list created in the section Setup in SharePoint:

1. Create a new Nintex form:
   
2. Define the following text fields:
3. "Material" of type Single Line Textbox is the input field that contains the material number.
4. "Suggested Materials" of type Choice displays the possible hits for the material number in a dropdown list.
5. "Selected Material" of type Single Line Textbox displays the material text of the selected material.
6. Open the advanced settings of the field "Material" and set Store Client ID in JavaScript Variable to Yes.
7. In the field Client ID JavaScript variable name enter the variable name "inputMaterial".
   
8. Click [Save].
9. Open the general settings of the field "Suggested Materials" and set Display format to Drop down list.
10. In the field Choices enter "no matches". This input will be overwritten via JavaScript.
11. Open the advanced settings of the field "Suggested Materials" and set Store Client ID in JavaScript Variable to Yes.
12. In the field Client ID JavaScript variable name enter the variable name "selectMaterial".
    
13. Click [Save].
14. Open the general settings of the field "Selected Material" and set Connected to to the SharePoint column Material.
15. Open the advanced settings of the field "Selected Material" and set Store Client ID in JavaScript Variable to Yes.
16. In the field Client ID JavaScript variable name enter the variable name "outputMaterialId".
    
17. Add a [Save] and [Cancel] button to the form.

Integrate JavaScript Code in Nintex

The JavaScript library for REST services by Theobald Software enables the use of yunIO services via JavaScript.
The depicted example uses the following JavaScript code for the following:

• To import the JavaScript library for REST services.
• To connect to yunIO.
• To run the service "MAKTService" that reads the material number and the material long text from the SAP table MAKT.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

document.addEventListener("DOMContentLoaded", async () => {
    let yunioClient = await import(
        "https://static.theobald-software.com/theobald.yunio.client.js/dist/theobald.yunio.client.js"
    );

    yunioClient.TheobaldYunioClient.initializeLiveCombobox({
        $: NWF$,
        controls: {
            inputId: inputMaterial,
            selectId: selectMaterial,
            outputId: outputMaterialId
            /*descriptionId: outputMaterialDescription*/
            /*buttonId: 'buttonId'*/
        },
        tableSettings: {
            serviceName: "MAKTService",
            idField: "MATNR",
            description field: "MAKTX",
            language: "E"
        },
        connection: {
            url: "https://yunio.example.com:8175/",
            /* future apiKey */
            username: prompt("yunIO username", ""),
            password: prompt("yunIO password", "")
        }
    });
});

To use this script in your application, replace the connection URL. If your yunIO service has a different name or settings, edit the table settings accordingly.

Follow the steps below to integrate the script in your Nintex Form:

1. Open the settings of the Nintex form and copy the JavaScript into the field Custom JavaScript.
   
2. Click [Save].

Run the Nintex Form

1. Preview or publish the Nintex form.
2. When prompted, enter your username and password to establish a connection to yunIO.
3. Enter a material number. The hits for the entry are read from SAP and displayed in the dropdown list "Suggested Materials".
4. Select a material from the dropdown list. The long text of the selected material is displayed in the field "Material".
5. Click [Save] to write the selected material to your SharePoint custom list.
   

Related Links:

• yunIO Documentation
• Nintex Documentation: Office 365 Forms
• Theobald Software GitHub: JavaScript library for REST services