Customer Portal

The B2B Customer Portal plug-in for WooCommerce (WC) enables seamless integration between your webshop and Business Central (BC). It adds a professional self-service environment to the ‘My Account’ section of your webshop, giving your customers direct access to important Business Central data - securely and in real time.

This plug-in is designed to improve customer experience, reduce manual tasks, and streamline communication. Instead of contacting your support team, customers can log in to their account and immediately view the information they need.

Key Features

• Display Business Central data: Show customer-specific information such as orders, invoices, shipments, RMAs and Credit memos.

• Customizable content: Choose which sales documents and fields are shown in the account section, based on what’s relevant to your customers. This also includes custom API pages built by your own Business Central developer.

• PDF downloads: Allow customers to download documents like invoices, packing slips, and order confirmations as PDF files - directly from their account.

• Drag-and-drop menu layout: Determine the order and grouping of the menu items in the account section by dragging them into place.

• Automatic data sync: The plug-in retrieves the latest information from Business Central in real time, ensuring accuracy and up-to-date content.

• Smart fallback handling: If no Business Central connection is available or the customer data is incomplete, the standard WooCommerce account page is displayed automatically.

• Built-in flexibility: Includes styling options and performance optimizations such as progressive loading and scheduled refreshes.

Whether you're looking to improve service levels, reduce support overhead, or provide a more professional B2B experience, the Customer Portal plug-in helps bring Business Central data directly to your customers - where and when they need it.

Step-by-step Configuration Guide

BC: Installation

Install the Tinx Customer Portal extension via AppSource and follow step 1 and 2 (optional) of the step-by-step guide shown above.

BC: Extending Tinx API Pages

The API pages that the Customer Portal uses expose the standard fields of a number of default Dynamics 365 Business Central tables. Many customers and partners have extended those tables with their own fields, or want to display other information in the account section of the webshop.

There are two ways to make that data available to the Customer Portal:

• Custom Info fields: add your own values to the existing Tinx API pages. Suitable when you want to enrich a sales document that the portal already retrieves.
• Custom API pages: create a new API page in Business Central for a table that is not covered by our pages. Suitable when you want to add a completely new menu item to the account section.

Both options are developed in Business Central and require an extension of your own. No changes to the WooCommerce plug-in are needed.

Custom Info Fields

Every Tinx API page contains ten additional customInfo fields. These fields are empty by default and are available on all our pages.

field(customInfo1; CustomInfo[1]) { }
field(customInfo2; CustomInfo[2]) { }
field(customInfo3; CustomInfo[3]) { }
field(customInfo4; CustomInfo[4]) { }
field(customInfo5; CustomInfo[5]) { }

The fields are populated by creating a subscriber function in a codeunit that subscribes to the GetCustomInfo integration event of the page:

[IntegrationEvent(false, false)]
local procedure GetCustomInfo(SalesHeader: Record "Sales Header"; var CustomInfo: array[10] of Text[100]; var orderComment: Text)
begin
end;

The values that are assigned to the instances of the CustomInfo[x] variable are exposed in the API page. The example below fills the custom info fields of the Sales Order Lines page:

codeunit 50XXX "TINX CPM Sales OrdrLine Subscr"
{
    [EventSubscriber(ObjectType::Page, Page::"TINX CPM Sales Order Lines", 'GetCustomInfo', '', true, true)]
    local procedure GetCustomInfo(SalesLine: Record "Sales Line"; var CustomInfo: array[10] of Text[100])
    var
        CustTable: Record "Custom Table";
    begin
        CustomInfo[1] := SalesLine."Customer Specific Field";
        CustomInfo[2] := format(SalesLine."Extension A field 1");
        CustomInfo[3] := format(SalesLine."Extension B field 3");
        if CustTable.Get(SalesLine."No.") then
            CustomInfo[4] := CustTable.Description;
        CustomInfo[5] := '';
        CustomInfo[6] := '';
        CustomInfo[7] := '';
        CustomInfo[8] := '';
        CustomInfo[9] := '';
        CustomInfo[10] := '';
    end;
}

Order Comment

The Sales Order page contains an extra orderComment variable. This variable has an unlimited size and is therefore suitable for transferring large texts, such as all comments added to the Sales Order Header.

field(orderComment; OrderComment) { }

The field is filled in the same way as the custom info fields:

codeunit 50XXX "TINX CPM Sales Orders Subscr"
{
    [EventSubscriber(ObjectType::Page, Page::"TINX CPM Sales Orders", 'GetCustomInfo', '', true, true)]
    local procedure GetCustomInfo(SalesHeader: Record "Sales Header"; var CustomInfo: array[10] of Text[100]; var ordercomment: Text)
    var
        SalesCommentLine: Record "Sales Comment Line";
    begin
        CustomInfo[1] := SalesHeader."FIELD 50123";
        CustomInfo[2] := SalesHeader."FIELD 50124";
        CustomInfo[3] := format(SalesHeader."Extension A Field 1");
        CustomInfo[4] := format(SalesHeader."Extension B Field 2");

        SalesCommentLine.SetRange("Document Type", SalesHeader."Document Type");
        SalesCommentLine.SetRange("No.", SalesHeader."No.");
        if SalesCommentLine.FindSet() then
            repeat
                ordercomment += SalesCommentLine.Comment + ' ';
            until SalesCommentLine.Next() = 0;
    end;
}

BC: New Custom API Pages

In addition to the API pages created by Tinx, customers and partners can create their own API pages in Business Central. These pages can be used by the Customer Portal as long as the required page properties are configured as described below. Once published, the page appears in the endpoint list in the WordPress back-end and can be added as a menu item like any other entity.

Required fixed properties

If a separate API page is created for the Customer Portal, the following properties must be copied exactly. The Customer Portal uses these values to recognise the page:

PageType = API;
APIPublisher = 'tinx';
APIGroup = 'customerPortal';
APIVersion = 'v2.0';
ChangeTrackingAllowed = false;
Editable = false;

Page-specific properties

The following properties are filled based on the table and entity that the API page exposes. The example below is for the Customer table:

EntityCaption = 'Customer';
EntitySetCaption = 'Customers';
EntityName = 'customer';
EntitySetName = 'customers';
SourceTable = Customer;

Property overview

Note: Use the fixed properties exactly as shown. Change only the page-specific properties, so they match the table and entity that the API page must expose to the Customer Portal.

Line item pages and auto-detection

An entity can consist of two API pages: a header page containing the documents, and a line page containing the line items belonging to a document. When a Header API Endpoint is selected and sales lines are enabled, the plug-in tries to select the matching line page automatically.

Recommendation: when you create your own API pages, name the two pages according to the same convention. End the name of the header page with headers and the name of the line page with lines, for example serviceContractHeaders and serviceContractLines. The plug-in then selects the right combination without any manual configuration.

The detection is based on the name of the header page. The word headers is removed from the end of the name and lines is added instead. The comparison is not case sensitive:

If no endpoint with the resulting name exists, the first available line item endpoint is selected. In both cases you can always select a different endpoint manually under Line Item API Endpoint.

Example page

You can use this example as a template:

page 11205894 TINXCPMCustomer
{
    PageType = API;
    APIPublisher = 'tinx';
    APIGroup = 'customerPortal';
    APIVersion = 'v2.0';
    ChangeTrackingAllowed = false;
    Editable = false;
    EntityCaption = 'Customer';
    EntitySetCaption = 'Customers';
    EntityName = 'customer';
    EntitySetName = 'customers';
    SourceTable = Customer;

    layout
    {
        area(Content)
        {
            repeater(General)
            {
                field(no; Rec."No.") { }
                field(name; Rec.Name) { }
                field(name2; Rec."Name 2") { }
                field(address; Rec.Address) { }
                field(address2; Rec."Address 2") { }
                field(postCode; Rec."Post Code") { }
                field(city; Rec.City) { }
                field(county; Rec.County) { }
                field(countryRegionCode; Rec."Country/Region Code") { }
                field(languageCode; Rec."Language Code") { }
                field(phoneNo; Rec."Phone No.") { }
                field(eMail; Rec."E-Mail") { }
                field(faxNo; Rec."Fax No.") { }
                field(contact; Rec.Contact) { }
                field(mobilePhoneNo; Rec."Mobile Phone No.") { }
                field(balanceDueLCY; Rec."Balance Due (LCY)") { }
                field(creditLimitLCY; Rec."Credit Limit (LCY)") { }
            }
        }
    }

    actions
    {
    }
}

Tip: Use Postman to check which fields your API page returns before you configure the menu item. See the Postman section below.

WC: Installation

Install the Tinx Customer Portal WooCommerce plug-in. If you don't have access to our plug-in please reach out to our support department.

WC: Configuration Reference

In the Wordpress back-end go to Tinx Customer Portal > General Settings. In the configuration you can find the following fields:

• Field	Explanation
  API Connection > Tenant ID	This variable is included in the request sent by WooCommerce to obtain the OAuth token and retrieve sales documents from Business Central.   tenantGuid (see screenshot).
  API Connection > Company GUID	This variable is included in the request sent by WooCommerce to obtain the OAuth token and retrieve sales documents from Business Central. Company GUID Go to your Business Central and Search for the company you want to make a connection with. Type in the search bar ‘companies’, click on ‘Companies’, select the company and open the page inspection tool (CRTL+ALT+F1) (see screenshot).
  API Connection > Company Name	This variable is included in the request sent by WooCommerce to retrieve sales document PDFs from Business Central. companyName (see screenshot).
  API Connection > Environment Name	This variable is included in the request sent by WooCommerce to obtain the OAuth token and retrieve sales documents from Business Central. environmentName (see screenshot).
  API Connection > Client ID	The Client ID is a unique identifier for your application within Microsoft Entra ID. It tells Business Central which application is requesting access. You can find this value in the App registrations section of the Azure portal. See step 1 of the step-by-step guide.
  API Connection > Client Secret	The Client Secret acts as a secure password for your application. It proves to Microsoft Entra ID that the request is coming from a trusted and authorized app. You create the Client Secret in the Certificates & secrets section of your app registration in the Azure portal. See step 1 of the step-by-step guide.
  API Connection > Connection Status	Displays the current connection status with Business Central, including whether the connection is active, if PDF retrieval is possible, and when the access token expires.
  Front-end > Business Central Section Title	Defines the section title displayed in the left-hand sidebar for Sales Documents
  Front-end > Hide WooCommerce Orders	By default, the WooCommerce account page includes a menu item for WooCommerce orders. Use this option to disable that menu item.
  Front-end > Customer Number Required	When this feature is enabled, only users with a Customer No. set in their WordPress profile will have access to the Customer Portal elements on their account page. If no Customer No. is provided, the user will see the default WooCommerce account page instead.
  Front-end > Amount of items per page	Defines how many entries are shown per page in the Sales Documents tables.
  Styling	Define the styling elements of the tables displaying the sales entities in the customer's account, such as font size and colors.
  Advanced > Progressive Loading	When enabled, the first page loads immediately for faster access, while remaining pages are fetched in the background.
  Advanced > Scheduled Data Refresh (SDR)	The plugin regularly checks whether the connection with Business Central is still active. This ensures that data is kept up to date and that the connection remains valid. If the connection is no longer active, the plugin will automatically disable itself on the front-end or deactivate certain components.
  Advanced > Refresh Interval	Defines how often the plugin verifies the connection to Business Central to keep data up to date and ensure system reliability.
  Advanced > SDR Status	Displays the status and timing of the scheduled task that checks the connection to Business Central, including the next run time, interval, and last execution.
  Advanced > Debug Logging	Enable or disable logging of API requests and errors to assist with troubleshooting.
  Advanced > Data Clean Up	When enabled, all plugin settings and customer data will be permanently deleted when the plugin is uninstalled. This action is irreversible.

• We created the following sales document * API pages in Business Central: Sales Orders, Sales Invoices, Sales Shipment, Sales Credit Memo and Return Receipt Headers. Those pages are used by the Customer Portal extension as a default to retrieve real-time information from Business Central. 

  Field	Explanation
  General > Enable	Determines whether sales documents should be retrieved in real time from Business Central.
  General > Name	Title of the sales entity menu-item in the account section of the customer.
  General > Display Sales Lines	Determines whether sales lines should be retrieved in real time from Business Central.
  * General > Show PDF Button	Allow customers to download Orders as PDF.
  General > Show Re-order Button	Allow customers to re-order the items from a specific sales document.
  General > Filter Sales Lines by Type	Allows you to filter which types of sales lines are retrieved from Business Central, such as items, G/L Accounts, or comments. This helps control which line types are shown in the Customer portal.
  General > Enable Advanced Filtering	Determines whether an additional filter is applied when records are retrieved from Business Central. When enabled, the Filter Expression field becomes available.
  Refresh Entity Data	Manually retrieve new types or fields. This will not affect your current configuration.
  Field Management > Field Name	This field corresponds to the field name in Business Central. Use drag-and-drop to adjust the sort order of fields as they appear.
  Field Management > Display Label	Allows you to customize the display name of the field as shown in the customer's account page.
  Field Management > Display on Front-end	Show or hide this field on the customer's account page.
  ** Configuration	Custom Menu Item Setup
  Menu	Determines the order and grouping of the menu items in the account section. Drag and drop the items into one of three areas: above the Business Central section title, collapsible underneath the section title, or below it.

WC: Add Custom Menu Items

Next to the standard sales documents, the plug-in allows you to add your own menu items to the account section. A menu item is based on a Business Central API page and is configured in the same way as a standard sales document, including field management and sales lines.

Any API page that is available in your Business Central environment can be used. This includes the standard Tinx API pages, as well as custom API pages developed by your own Business Central developer. Custom API pages appear in the endpoint list automatically, and no changes to the plug-in are required.

The same API page can be used more than once. This allows you to create, for example, an 'Open Sales Orders' and a 'Released Sales Orders' menu item based on the same Tinx salesOrders API page, each with its own filter expression.

In the WordPress back-end go to Tinx Customer Portal > Add Menu Item. In the configuration you can find the following fields:

• Field	Explanation
  Name	Title of the menu-item in the account section of the customer.
  Header API Endpoint	The Business Central API page used to retrieve the records for this menu item. Both standard Tinx API pages and custom API pages from your own Business Central environment are listed here.
  Customer No Field	The field from the header endpoint that contains the customer number. This is used to show each customer only their own records. An example value from your Business Central data is shown below the field.
  Sales Lines	Determines whether the entity has line items that should be retrieved. When enabled, a line item endpoint can be selected.
  Line Item API Endpoint	The Business Central API page used to retrieve the line items belonging to a record.
  Item No Field	The field from the line item endpoint that is used as the item number for re-ordering.
  Display Mode	Determines how the data is presented in the account section: as a table containing multiple records, or as field: value pairs for a single record. This option is only available when sales lines are not enabled.

Postman (optional)

Postman is a standalone software testing API (Application Programming Interface) platform to build, test, design, modify, and document APIs. You can use Postman to test and see which field identifiers are available in the API pages. You can download Postman here.

To make life easier for you we prepared a Postman collection. You can download the collection here. This will help you setting up a Postman configuration to make a connection with Business Central. To set this up please follow the steps below:

• Step 1: Open Postman.
  a) Go to your workspace.
  b) Click on import and drag-and-drop the 'Example Customer Portal.postman_collection' file in the import-window.

  

• Step 2: Open the 'Example Customer Portal' collection and navigate to the 'Variables' tab
  Replace the dummy information in the 'Initial value' column with your business central data. The 'Initial value' and 'Current value' column should contain the same information. After this has been done save the collection
  
  a) tenantGuid - see screenshot
  b) companyGuid - see screenshot
  c) clientId - see step 2 in the Business Central section
  d) clientSecret - see step 4 in the Business Central section
  e) companyName - see screenshot
  f) environmentName - see screenshot

  

• Step 3: Open the 'Example salesOrders' request and navigate to the 'Authorization' tab
  a) To retrieve a Business Central token click on the orange button 'Get New Access Token'. If successful click on the orange button 'Use Token'. Now you've a token which is used to make a connection with Business Central (valid for one hour (by default)).
  b) Click on the blue button 'Send' to get the sales order information in the Postman response section. 
  
  Tip1: This example is for retrieving the sales orders list. To check which API pages are available remove the /salesOrders from the url.
  Tip2: You can add filters to your request, here you can find all supported filters. E.g.
  ../salesOrders?$filter=sellToCustomerNo eq 'XXXX'

  

• Step 4: Open the 'getPDF' request and navigate to the 'Authorization' tab
  a) To retrieve a Business Central token click on the orange button 'Get New Access Token'. If successful click on the orange button 'Use Token'. Now you've a token which is used to make a connection with Business Central (valid for one hour (by default)).
  b) Navigate to the 'Body' tab and replace the 'Your documentNo' with a Business Central sales order No.
  c) Click on the blue button 'Send' to get the sales order information in the Postman response section. 
  
  Tip: To get other PDF documents (not from sales orders). You can replace the 'PrintPDFOrder' element name in the 'Body' tab with: PrintPDFQuote, PrintPDFInvoice, PrintPDFShipment or PrintPDFCredit.