X4 Produktdokumentation

Defining the Technical Process: Mapping

In this step, you define the final process steps of the Technical Process. The XML file generated from the CSV file is to be further transformed using an XSL mapping in order to correspond to the desired data structure in the Web App.

For this purpose , you use a so-called mapping or XSL Stylesheet.

Note:

For more complex mappings, knowledge of the elements of XSLT 2.0 may be required. The more complex functions required for this example mapping are included in the step-by-step instructions.

◀️

Prerequisites:

You have created the example CSV file that was to be prepared and saved it locally. For more information, see Example: Web App Project .

Creating the mapping

  1. Right-click the ProcessWebApp.wrf Technical Process in the Projects view and select New > XSL Stylesheet….
    The File Creation Wizard dialog opens.

  2. If necessary, you can customize the name of the stylesheet in the File name field.

  3. Click Finish.
    ✅ The stylesheet is created in the Web App Project and opens automatically in the editor.

  4. Return to the ProcessWebApp.wrf Technical Process.

Inserting the mapping

  1. Drag the image-20241017-063201.png Mapping element from the Palette view next to the image-20241029-095407.png Buffer element in the editor.

  1. Click the element.

  2. Enter a name in the Label field in the Properties view, e.g. Stylesheet.

  3. Click the image-20241014-130844.png button in the Document field in the Properties view.
    The Choose Transform Input dialog opens.

  4. Select the previously created XSL file stylesheet.xsl.

  5. Click OK.

  6. Clear the Empty Input checkbox in the Properties view.

If this option is active, the mapping does not use the data from the previous process step.

  1. Select the Remove X4 Processing Instructions checkbox in the Properties view.

If this option is active, all X4 Processing Instructions are deleted from the result.

  1. Click on the lower right image-20241017-063436.png corner of the image-20241029-095407.png Buffer element, hold down the mouse button, and drag a connection to the image-20241017-063201.png Stylesheetelement.

    image-20241111-132234.png


Configuring the mapping

  1. Double-click the image-20241017-063201.png Stylesheet element in the ProcessWebApp.wrf Technical Process .
    The linked file stylesheet.xsl opens in the editor.

  2. Drag the temporarily saved Buffer.xml file from the Projects view to the left image-20241029-121716.png pane of the stylesheet.xsl file.

    ✅ The XML structure of the file is displayed in the left pane of the stylesheet.xsl file.

  3. Right-click the template match="/" entry in the right pane of the stylesheet.xsl file and select image-20250107-122023.png Element.

  4. Select As Child from the Location drop-down list and define a name for the element, e.g. Ok.

  5. Right-click the Ok element in the right pane and select image-20250107-122538.png XSL Element.

  6. Select As Child from the Location drop-down list and select for-each from the XSL Element drop-down list.

  7. Click Next.

  8. Enter the Csv/Row value in the select field to define the new data structure for each row of the CSV file.

  9. Click Finish.
    ✅ A yellow connection line graphically indicates the mapping.

  10. Right-click the image-20250107-122023.png Ok element in the right pane and select image-20250107-122023.png Element.

  11. Select As Child from the Location drop-down list and define the name of the element: Customer.

  12. Right-click the image-20250107-122023.png Customer element in the right pane and select image-20250107-122023.png Element.

  13. Select As Child from the Location drop-down list and define the name of the element: FirstName.

  14. Right-click the image-20250107-122023.png FirstNameelement in the right pane and select image-20250107-122538.png XSL Element.

  15. Select As Child from the Location drop-down list and select value-of from the XSL Element drop-down list.

  16. Click Next.

  17. TEnter the substring-before(//ContactName, ' ') value in the select field to set the first name as the first substring from the ContactName field.

  18. Click Finish.
    ✅ A green connection line graphically indicates the mapping.

  19. Right-click the image-20250107-122023.png Customer element in the right pane and select image-20250107-122023.png Element.

  20. Select As Child from the Location drop-down list and define the name of the element: LastName.

  21. Right-click the image-20250107-122023.png LastName element in the right pane and select image-20250107-122538.png XSL Element.

  22. Select As Child from the Location drop-down list and select value-of from the XSL Element drop-down list.

  23. Click Next.

  24. Enter the substring-after(//ContactName, ' ') value in the select field to set the last name as the second substring from the ContactName field.

  25. Click Finish.
    ✅ A green connection line graphically indicates the mapping.

  26. Right-click the image-20250107-122023.png Customer element in the right pane and select image-20250107-122023.png Element.

  27. Select As Child from the Location drop-down list and define the name of the element: Company.

  28. Right-click the image-20250107-122023.png Company element in the right pane and select image-20250107-122538.png XSL Element.

  29. Select As Child from the Location drop-down list and select value-of from the XSL Element drop-down list.

  30. Click Next.

  31. Enter the //CompanyNamevalue in the select field.

  32. Click Finish.
    ✅ A green connection line graphically indicates the mapping.

  33. Right-click the image-20250107-122023.png Customer element in the right pane and select image-20250107-122023.png Element.

  34. Select As Child from the Location drop-down list and define the name of the element: Address.

  35. Right-click the image-20250107-122023.png Address element in the right pane and select image-20250107-122538.png XSL Element.

  36. Select As Child from the Location drop-down list and select value-of from the XSL Element drop-down list.

  37. Click Next.

  38. Enter the concat (//PostalCode, ' ' , //Address) value in the select field to concatenate the PostalCode and Address fields to one string.

  39. Click Finish.
    ✅ Two green connection lines graphically indicate the mapping.

    image-20250115-125731.png
  40. Click image-20241029-132740.png Save.

  41. Return to the ProcessWebApp.wrf Technical Process.

▶️