Create KE51_CreateProfitCenter (SharePoint Designer Form)

SharePoint online allows Microsoft applications to work as a stack. Innowera enables SharePoint users to effectively use SharePoint-2013 and SPD-2013 forms. Users interact with SAP without leaving the SharePoint environment and without performing extensive implementation in Microsoft or SAP landscape.

Process file can be published to Innowera Web and Mobile Server as web service. Web and Mobile Server provides web API which can be consumed by SharePoint to access the SAP data. This section of explains how to create KE51_CreateProfitCenter (SharePoint Designer Form)

Refer to the following prerequisites to customize SharePoint standard form using SharePoint Designer and run the same using Web and Mobile Server.

• SharePoint Server 2013
• SharePoint Designer 2013
• Users must have appropriate SharePoint access authorization for access the SharePoint site in SharePoint designer.
• Innowera Web and Mobile Server (IWMS)
• Version should be 3.4.7 or above
• If SharePoint is running on the HTTPS (SSL certificate) protocol, then Web and Mobile Server must be running on the HTTPS (SSL certificate) protocol.
• SAP GUI 7.50 or later

This section contains the following topics:

• Create Innowera WMS Configuration List
• Add jQuery Reference for JavaScript
• Create SharePoint List
• Create Column

Create Innowera WMS Configuration List

The very first step to create an SPD form for any process file is to create a list to store the value of Global Token Key and Innowera Web and Mobile Server URL.

The list should be created only once and will be used for all SharePoint Designer forms. If this list already exists, then skip this step and directly move to Create SharePoint List.

To create a SharePoint list,

1. Open SharePoint, go to Site Contents, and then slick add an app .
2. Select Custom List.

   

3. In the Adding Custom List screen, enter a name for the list and select Create.
4. Create columns as per the details provided in following table. Note that the column name in the table is case sensitive.

   Column Name	Type
   IWMSurl	Single line of text
   GlobalToken	Single line of text

5. Select LIST, and then select Create Column.

   

6. Enter name of the column, and then select OK.

   

7. Go to LIST tab, and then select Modify View from Manage Views group.

   

8. Enable ID column, and then select OK. You must enable ID column to get the row data from this list. The list is as shown in the following screenshot.

   

9. To create new item in list which is created in the steps above, select new item from the list tab.

   

10. Enter the details as provided in the following table.

    

    Lable Name	Enter the values for control
    Title	Enter the title for raw data
    IWMSUrl	Enter the URL of IWMS
    GlobalToken	Enter the global token which is copied from IWMS.

11. To copy the global token from Innowera Web and Mobile Server, log on to Innowera Web and Mobile Server with valid login credentials. Go to Admin > Settings > Basic Settings. Select IWMS Key Settings, and then copy the Global token key as shown in the following screenshot.

    

12. The new item which is created will be displayed in the list.

Add jQuery Reference for JavaScript

This topic explains how to add a jQuery reference to JavaScript.

To add jQuery reference,

1. Double-click jquery.txt from the left pane to open the attached file, and save this as a text file with .js extension.
2. Open SharePoint, go to Site Contents, and then select Site Assets folder.
3. Select Upload.

   

4. Select File to upload the required Javascript file, and then select OK. Choose the file which you have saved in step 1.

   

5. Select the jQuery file which you have added. Copy that jQuery reference URL.

   

Create SharePoint List

This list will be created to design the form in SharePoint Designer and to store the forms data.

To create a SharePoint list

1. Open SharePoint, go to Site Contents, and then select add an app.
2. Select Custom List.

   

3. Enter the name of the list, and then select Create.

   

Create Column

This section explains you how to create a column in SharePoint.

To create column,

1. Select List, and then select Create Column.

   

2. Enter Column name, and then select type of information that must be in the column.

   

3. While creating new columns, ensure to select appropriate Column Type as shown in the following table.

   Column Name	Type	Mandatory Fields
   Profit Center	Single line of text	Yes
   General Name	Single line of text	Yes
   Long Text	Single line of text	No
   Person Responsible	Single line of text	Yes
   PC Title	Single line of text	No
   House Number and street	Single line of text	No
   City	Single line of text	No
   District	Single line of text	No
   Country Key	Single line of text	No
   Language Key	Single line of text	No
   First telephone number	Single line of text	No
   Profit center area	Single line of text	Yes
   SAPResult	Single line of text	No

Open SharePoint Designer 2013

1. Select Open Site from SharePoint Designer 2013.
2. Copy that URL of SharePoint site where the list KE51_Create Profit Center_API is created as shown in the following screenshot.

   

3. Paste URL with site name in Site name field of the Open Site window and select Open with appropriate SharePoint credentials.
4. Go to List and Libraries, and then open KE51_Create Profit Center_API list which is created in step 2.

   

5. If the forms are not created, perform the following steps to create the forms.
   • Select Newfrom Forms to create a new form.

     

   • Provide the file name, select Set as default form for the selected type and Create link in List Item Menu and Ribbon, and provide the same file name in Link and Command Name. Select OK.

     

6. Select CreateProfitCenter.aspx from forms or the one which is already created.

   

7. Go to Hometab. Select Advanced Modeand it will open Style tab.

   

8. From Style tab, select Manual in Mode drop-down option.

   

9. Perform the following steps to generate the API code of process file from IWMS
   • Sign in to Innowera Web and Mobile Server with valid login credentials. Go to Publisher > Import.
   • Select your process file as shown in the following screenshot.

     

   • Go to Manage Process and Service.
   • Select Process Management from drop-down menu and click Generate API Code.
   • Select the process file for which the API Code must be generated.
   • Click Generate API Code as shown in the following screenshot.

     

10. Follow the steps mentioned below to insert this API code.
    • Go to SharePoint Designer, and then search for <xsl:param name="Rows"/> tag in the form that you have created.
    • Insert the JavaScript and CSS code as shown in the following screenshot.

      

    • Go to SharePoint Desiger, and search < xsl:param name="Pos" select="position()"/> tag in the form that is opened.
    • Insert the actual code (body code) as shown in the following screenshot.

      

    • Save the changes of SharePoint Designer form which is created above. onclick="RunProcess()" is the function name of API code which is copied from IWMS in above steps.

Open the SharePoint Designer list form which is created

Open the SharePoint site on which the above list & SPD form is created.

1. Once you open the SharePoint site, select the list KE51_Create Profit Center_API created in above steps and click on the list as shown in the following screenshot.

   

2. Click on the new item as shown in the following screenshot.

   

The creation of KE51_Create Profit Center_API form is concluded and displayed as shown in the image below.

Modify API Code Copied from IWMS

Replace with alert (jqXHR.responseText) as shown in the following screenshot.

JavaScript for Getting Value of Global Token, IWMSUrl and SharePoint Current Logon User Name

For copy the JavaScript function to Click on the below icon and double click onFormJS.pdf from the left pane to open the attached file.

Troubleshooting

Issue 1

Symptom: You might see the following error message:

Invalid Username. Please pass valid IWMS username to proceed further.

Solution: Follow the steps mentioned as below.

• Verify that SharePoint user is created in Innowera Web and Mobile Server.
• Click on following icon to open the guide on how to AddingUsersInInnoweraWebandMobileServer (IWMS)

Click on the below file and double click on Adding users in Innowera Web and Mobile Server (IWMS).pdf from the left pane to open the attached file.

Issue 2

Symptom: You might see the following error message:

Cannot find column 8

or any other column number.

Solution: Make sure that parameter of API code matches with the form parameter as explained in How to modify API code which you have copied from IWMS.