Custom Code Example – Last Ordered Products via Report Builder

Overview

In version 4.14.0 we introduced a new CIMcloud helper that can be used in Custom Code to write a query and return the results in an array of JSON objects.

This is a very powerful tool that can be used to build your own interfaces with your data.

More information on the getReportBuilderResults helper.

Some Example Use Cases

• Drawing schema/markup for SEO
• Returning information for a logged in user
• Creating user-specific content, like displaying recently ordered items

Example – Drawing Recently Ordered Items

1. Login to the Worker Portal
2. Create a new Report with Report Builder (More Info), with the following settings:
   1. Main Table Alias: o
   2. Table Name: orders
   3. Join Tables
      • inner join order_detail od on o.o_key = od.o_id
        inner join products p on p.p_key = od.p_id
   4. Order By: o.date DESC
   5. Fields -> Advanced
      • o_key, p.sku, p.nm, p.thumb, p.status, od.url
   6. Allow the results to be accessible via Custom Code helpers? Yes
3. Copy the report builder key in the URL
4. Create a new Content Page for testing (More Info)
   1. Copy the page key in the URL
5. Impersonate a contact
   1. This will display the “Customize” badge in the lower left (More Info)
6. Head to your new Content Page
7. Click “Customize” in the lower left
8. Paste the Code below into the Header section, replacing the Content Page key/Report Builder key, and submit

Result

Custom Code

Replace these fields with your actual Page Key and Report Builder Key:

• PAGE_KEY
• REPORT_BUILDER_KEY

Impersonate a contact, then view your new page for testing on the sitefront.  Click the “Customize” link in the bottom left to enter this code into the Header:

<style>
  .product-card { display: inline-block; }
</style>

<script>
  // Report Builder Use Case in Help Center
  if(cimcloud.helpers.pageKey == "PAGE_KEY"){
    sCustomerKey = cimcloud.session.customerKey;
    cimcloud.report.getReportBuilderResults(
        "REPORT_BUILDER_KEY", 
        "searchexact~o.c_id~" + sCustomerKey
    )
    .then(data => {
      const titleHTML = '<div id="customer-recent-products"><h3>Your last ordered products</h3></div>';
      $('.wpc_container .page-header').after(titleHTML);

      const products = data;

      // Limit to first 4 products
      const firstFour = products.slice(0, 4);

      firstFour.forEach(product => {
        const name = product["p.nm"] || "Unnamed Product";
        const rawPrice = parseFloat(product["retail_price"]);
        const price = isNaN(rawPrice)
          ? "N/A"
          : rawPrice.toLocaleString("en-US", { style: "currency", currency: "USD" });
        const image = product["p.thumb"] ? product["p.thumb"].replace(/&/g, "&") : "images/product-placeholder-image-4.jpg";
        const url = product["od.url"] || "#";

        const productHTML = `
          <div class="product-card" style="border:1px solid #ccc; padding:10px; margin:10px; max-width:200px;">
          <a href="${url}">
            <img src="${image}" alt="${name}" style="width:100%; height:auto;" />
            <h3>${name}</h3>
          </a>
          <p>Price: ${price}</p>
        </div>
        `;

        $('#customer-recent-products').append(productHTML);
      });
    })
    .catch(error => {
        console.error('Error:', error.message);
    });
  }
</script>