`;
return createElementFromHTML(html);
}
function createProductsHTML(productsEyebrow, products) {
let html = `
`;
return createElementFromHTML(html);
}
/**
* Updates project details bar with metadata JSON.
* @returns {void}
*/
async function updateProjectDetailsBar() {
try {
// Get all API project details bar nodes
const apiProjectDetailBars = document.querySelectorAll(SELECTORS.PROJECT_DETAILS_BAR_API_DATA_NODE);
// if there are no API project details bar nodes, return
if (apiProjectDetailBars.length === 0) return;
// Get the first and second project details bar
const apiProjectDetailsBarParent = apiProjectDetailBars[0].parentNode.parentNode;
const firstProjectDetailsBar = apiProjectDetailsBarParent.firstElementChild;
const secondProjectDetailsBar = firstProjectDetailsBar.nextElementSibling;
// Update the project details bars heading text
const headingText = metadataJSON.headingText;
const projectDetailsBarTitle = firstProjectDetailsBar.querySelector(SELECTORS.PROJECT_DETAILS_BAR_TITLE);
if (headingText && projectDetailsBarTitle) {
projectDetailsBarTitle.textContent = headingText;
}
// Update the project details bars content
updateFirstProjectDetailsBar(firstProjectDetailsBar);
updateSecondProjectDetailsBar(secondProjectDetailsBar);
} catch (error) {
console.error('Error updating Project Details Bar', error);
}
}
/**
* API Template Structure
*
* Project Details Bar 1
* Heading
* Column 1 - Customer, Partner
* Column 2 - Products
* Column 3 - Services and Support
* Footer - Divider
**/
function updateFirstProjectDetailsBar(firstProjectDetailsBar) {
const body = firstProjectDetailsBar.querySelector(SELECTORS.PROJECT_DETAILS_BAR_BODY);
const columns = body.querySelectorAll(SELECTORS.COLUMNS);
// clear the columns to be rebuilt
columns.forEach(column => {
column.innerHTML = '';
});
updateCustomers(columns[0]);
updatePartner(columns[0]);
updateProducts(columns[1]);
updateServices(columns[2]);
}
function updateCustomers(firstColumn) {
const { 'customer-name': customerName, 'customer-url': customerUrl, 'customer-eyebrow': customerEyebrow } = metadataJSON;
if (!customerName || !customerUrl || !customerEyebrow) return;
const customerSection = createSectionHTML(customerEyebrow, [{ text: customerName, url: customerUrl }]);
firstColumn.appendChild(customerSection);
}
function updatePartner(firstColumn) {
const { partners, 'partners-eyebrow': partnerEyebrow } = metadataJSON;
if (!partners || partners.length === 0 || !partnerEyebrow) return;
const partnerSection = createSectionHTML(partnerEyebrow, partners);
firstColumn.appendChild(partnerSection);
}
function updateProducts(secondColumn) {
const { products, 'products-eyebrow': productsEyebrow } = metadataJSON;
if (!products || products.length === 0 || !productsEyebrow) return;
const productsSection = createProductsHTML(productsEyebrow, products);
secondColumn.appendChild(productsSection);
}
function updateServices(thirdColumn) {
let { services, 'services-eyebrow': servicesEyebrow } = metadataJSON;
if (!services || services.length === 0) return;
servicesEyebrow = servicesEyebrow || 'SERVICES';
const servicesSection = createSectionHTML(servicesEyebrow, services);
thirdColumn.appendChild(servicesSection);
}
/**
* API Template Structure
*
* Project Details Bar 2
* No heading
* Column 1 - Organization Size, Country
* Column 2 - Business Need, Industry
* Button
* No footer
*/
function updateSecondProjectDetailsBar(secondProjectDetailsBar) {
const body = secondProjectDetailsBar.querySelector(SELECTORS.PROJECT_DETAILS_BAR_BODY);
const columns = body.querySelectorAll(SELECTORS.COLUMNS);
// clear the first two columns
columns[0].innerHTML = '';
columns[1].innerHTML = '';
updateOrganizationSize(columns[0]);
updateCountry(columns[0]);
updateBusinessNeed(columns[1]);
updateIndustry(columns[1]);
}
function updateOrganizationSize(firstColumn) {
const { 'organization-size': organizationSize, 'organizations-size-eyebrow': organizationsSizeEyebrow } = metadataJSON;
if (!organizationSize || !organizationsSizeEyebrow) return;
const organizationSizeSection = createSectionHTML(organizationsSizeEyebrow, [organizationSize]);
firstColumn.appendChild(organizationSizeSection);
}
function updateCountry(firstColumn) {
let { 'country-value': countryValue, 'country-eyebrow': countryEyebrow } = metadataJSON;
if (!countryValue) return;
countryEyebrow = countryEyebrow || 'COUNTRY';
const countrySection = createSectionHTML(countryEyebrow, [countryValue]);
firstColumn.appendChild(countrySection);
}
function updateBusinessNeed(secondColumn) {
const { 'business-need': businessNeed, 'business-need-eyebrow': businessNeedEyebrow } = metadataJSON;
if (!businessNeed || businessNeed.length === 0 || !businessNeedEyebrow) return;
const businessNeedSection = createSectionHTML(businessNeedEyebrow, businessNeed);
secondColumn.appendChild(businessNeedSection);
}
function updateIndustry(secondColumn) {
const { industries, 'industries-eyebrow': industriesEyebrow } = metadataJSON;
if (!industries || industries.length === 0 || !industriesEyebrow) return;
const industriesSection = createSectionHTML(industriesEyebrow, industries);
secondColumn.appendChild(industriesSection);
}
/**
* Set telemetry attributes on all anchor elements in the project details bar
*/
function setTelemetryAttributes() {
const projectDetailsBars = document.querySelectorAll(SELECTORS.PROJECT_DETAILS_BAR);
projectDetailsBars.forEach(projectDetailsBar => {
// get component name and view name
const componentName = projectDetailsBar.getAttribute(ATTRIBUTES.COMPONENT_NAME);
const viewName = projectDetailsBar.querySelector(SELECTORS.PROJECT_DETAILS_BAR_VIEW)?.textContent;
// get all project details bar list containers
const projectDetailsBarListContainers = projectDetailsBar.querySelectorAll(SELECTORS.PROJECT_DETAILS_BAR_LIST_CONTAINER);
projectDetailsBarListContainers.forEach(projectDetailListContainer => {
// get container title
const containerTitle = projectDetailListContainer.querySelector(SELECTORS.PROJECT_DETAILS_BAR_LIST_CONTAINER_TITLE)?.textContent.trim();
// get all project details bar lists
const projectDetailsBarLists = projectDetailListContainer.querySelectorAll(SELECTORS.PROJECT_DETAILS_BAR_LIST);
projectDetailsBarLists.forEach(projectDetailsBarList => {
// get all project details bar list actions
const projectDetailsBarListActions = projectDetailsBarList.querySelectorAll(SELECTORS.PROJECT_DETAILS_BAR_LIST_ACTIONS);
projectDetailsBarListActions.forEach((projectDetailsBarListAction, i) => {
let anchor = projectDetailsBarListAction.querySelector(SELECTORS.ACTION);
if (anchor) {
setAnchorTelemetryAttributes(anchor, viewName, containerTitle, componentName, i);
}
});
});
// get all related products
const relatedProducts = projectDetailListContainer.querySelectorAll(SELECTORS.RELATED_PRODUCTS);
relatedProducts.forEach(relatedProduct => {
// get all related product actions
const relatedProductActions = relatedProduct.querySelectorAll(SELECTORS.RELATED_PRODUCT);
relatedProductActions.forEach((relatedProductAction, i) => {
let anchor = relatedProductAction.querySelector(SELECTORS.ACTION);
if (anchor) {
setAnchorTelemetryAttributes(anchor, viewName, containerTitle, componentName, i);
}
});
});
});
});
}
/**
* Set anchor telemetry attributes
* @param {HTMLElement} anchor - anchor element
* @param {string} viewName - view name
* @param {string} containerTitle - container title
* @param {string} componentName - component name
* @param {number} index - collection index
*/
function setAnchorTelemetryAttributes(anchor, viewName, containerTitle, componentName, index) {
if (viewName) {
anchor.setAttribute(ATTRIBUTES.DATA_BI_VIEW, viewName);
}
if (containerTitle) {
anchor.setAttribute(ATTRIBUTES.DATA_BI_HN, containerTitle);
}
anchor.setAttribute(ATTRIBUTES.DATA_BI_COMPNM, componentName);
anchor.setAttribute(ATTRIBUTES.DATA_BI_SN, index);
anchor.setAttribute(ATTRIBUTES.DATA_BI_CT, dataBiCt);
}
// event listener for DOM ready
document.addEventListener('DOMContentLoaded', () => {
// Get the metadata JSON. If not found, wait for request manager to provide it.
metadataJSON = window.ocReimagine?.CustomerStoryRequestManager?.storyMetadata;
if (!metadataJSON) {
document.addEventListener(EVENTS.METADATA, (e) => {
metadataJSON = e.detail.storyMetadata;
updateProjectDetailsBar();
});
} else {
updateProjectDetailsBar();
}
// Set telemetry attributes.
setTelemetryAttributes();
});
})(document);
Follow Microsoft