Sync Nintex Forms with SAP using JavaScript (SAP Personnel 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 employee name is entered in an input field, all possible hits are displayed in a dropdown list.
• If an employee is selected in the drop-down list, the name and personnel number is displayed in a text field.
• When the input is confirmed, the personnel data of the selected employee 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 PA0002 that contains HR master data.
4. Select the columns PERNR, NACHN and VORNA 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 employee data is added to a custom SharePoint list via a Nintex form:

1. Create a SharePoint custom list with a column "Personnel Number", "Last Name" and "First Name".
   
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:
   • "Search for personnel no." of type Single Line Textbox is the input field that contains the personnel number.
   • "Suggested personnel no." of type Choice displays the possible hits for the personnel number in a dropdown list.
   • "Personnel No." of type Single Line Textbox displays the personnel number of the selected employee.
   • "Last Name" of type Single Line Textbox displays the last name of the selected employee.
   • "First Name" of type Single Line Textbox displays the first name of the selected employee.
3. Open the advanced settings of the field "Search for personnel no." and set Store Client ID in JavaScript Variable to Yes.
4. In the field Client ID JavaScript variable name enter the variable name "inputPerNr".
   
5. Click [Save].
6. Open the general settings of the field "Suggested personnel no." and set Display format to Drop down list.
7. In the field Choices enter "no matches". This input will be overwritten via JavaScript.
8. Open the advanced settings of the field "Suggested personnel no." and set Store Client ID in JavaScript Variable to Yes.
9. In the field Client ID JavaScript variable name enter the variable name "selectPerNr".
   
10. Click [Save].
11. Open the general settings of the field "Personnel No." and set Connected to to the SharePoint column Personnel Number.
12. Open the advanced settings of the field "Selected Material" and set Store Client ID in JavaScript Variable to Yes.
13. In the field Client ID JavaScript variable name enter the variable name "outputPerNr".
    
14. Open the general settings of the field "Last Name" and set Connected to to the SharePoint column Last Name.
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 "outputName".
    
17. Open the general settings of the field "First Name" and set Connected to to the SharePoint column First Name.
18. Open the advanced settings of the field "Selected Material" and set Store Client ID in JavaScript Variable to Yes.
19. In the field Client ID JavaScript variable name enter the variable name "outputFirstName".
    
20. 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 "QueryTablePA0002" that reads HR master data from the SAP table PA0002.

 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
29
30
31
32
33

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: inputPerNr,
            selectId: selectPerNr,            
            outputId: outputPerNr,
            descriptionId: outputFirstName,
            additionalInfoId: outputName 
            /*buttonId: 'buttonId'*/
        },
        tableSettings: {
            serviceName: "QueryTablePA0002",
            idField: "PERNR",
            descriptionField: "VORNA",
            additionalInfoField: "NACHN"           
        },
searchOptions: {
   extraWhereConditions: "AND ENDDA LIKE '99991231'"
},
        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.

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 personnel number. The hits for the entry are read from SAP and displayed in the dropdown list "Suggested personnel no.".
4. Select an employee from the dropdown list. The first and last name of the selected employee is displayed in the fields "First Name" and "Last Name".
5. Click [Save] to write the name and personell number of the selected employee to your SharePoint custom list.
   

Related Links:

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