Please also have a look in our OnlineHelp for further information.

Objective:

SAP Purchase Orders will be read from an SAP Database within the BOARD Designer. Clicking on a row will in turn fetch vendor description from SAP using ERPConnect and show it in a built-in web-page inside BOARD.

To demonstrate this particular of many possible integration scenarios between ERPConnect and BOARD, let us create a simple project using:

a. DataView component

b. Viewer component

image001

1.Using common BOARD techniques and a correctly configured DataView component (details omitted for brevity, please reference the BOARD Documentation if needed) gives us the following view, containing a table with Purchase information.

image002

2.Now let us add a Viewer component to the form.

It should be able to receive the Purchase Number, which is currently selected as a parameter (EBELN) and “send a request” to fetch a web-page, based on this parameter. Sample “Layout” configuration is illustrated in the image below.

image003

3.Now let us sketch an exemplary layout for the Vendor Information page

image004

3.1. The corresponding HTML could be the table.

<body>
    <form id="form1" runat="server">
        <div>
            <table class="lfa1T">
                <tr>
                    <td colspan="2">
                        <div class="ts-vendor-title ts-nohover">
                            SAP Vendor Details
                        </div>
                    </td>
                </tr></table>
        </div>
    </form>
</body>
</html>

3.2. The code-behind implementation can consist of two parts, the Page_Load part extracts the parameter (EBELN), tries to get the vendor info from SAP utilizing the ERPConnect library (see 3.3.) and writes the values to the form fields.

protected void Page_Load(object sender, EventArgs e)
        {
            string ebeln = HttpUtility.UrlDecode(Request.QueryString["EBELN"]);
            var vendor = ProviderLfa1.GetLfa1FromSap(ebeln);
            if (String.IsNullOrEmpty(vendor.Lifnr))
            {
                form1.Visible = false;
            }
            LIFNR.ReadOnly = LAND1.ReadOnly = NAME1.ReadOnly = ORT01.ReadOnly = PSTLZ.ReadOnly = true; 
            LIFNR.Text = vendor.Lifnr;
            LAND1.Text = vendor.Land1;
            NAME1.Text = vendor.Name1;
            ORT01.Text = vendor.Ort01;
            PSTLZ.Text = vendor.Pstlz;
        }

3.3. The extraction part establishes a connection to SAP, tries to read the Vendor ID by passing the Order ID (EBELN).

a. Look up Vendor №

	ReadTable table = new ReadTable(connection);
	table.AddField("LIFNR");
	table.AddCriteria(String.Format("EBELN = {0}", ebeln));
	table.Run();

b. Look up Vendor details

	ReadTable table = new ReadTable(connection);
	table.AddField("LAND1");
	table.AddField("NAME1");
	table.AddField("ORT01");
	table.AddField("PSTLZ");
	table.AddCriteria(String.Format("LIFNR = '{0}'", lifnr));
	table.TableName = "LFA1";
	table.Run();
	table.Result.Rows[0]["LAND1"].ToString()
	

You can find the full code of the WebForms project at the end of the article.

Add the WebSite to the IIS (if needed) and copy the URL.

4.Finish the integration by specifying this URL in the Layout Designer of the Viewer component in the BOARD Project.

image005

The result would be an embedded WebPage on the right side of the DataView, where the Vendor information is being refreshed on changing (selecting) the record inside the DataView table.

image006

Objective achieved, the wireframe is implemented and can be used. Enjoy the result.

ERPConnect

Source Code (VS Project)