Create a Search Bar for your SFMC UI

Photo by Mick Haupt on Unsplash

Are you tired of combing through folders and BUs to find automations, content, or data extensions in Salesforce Marketing Cloud? Look no further! In this tutorial, we will walk you through the steps to build a Chrome extension that adds that allows users to search for to the Salesforce Marketing Cloud UI. With just a few clicks, you’ll be able to search and selct all data extensions in your account with ease. Whether you’re a developer or simply looking to streamline your workflow, this extension is a must-have tool. Let’s get started!

To create a Chrome extension that adds a search bar to the Salesforce Marketing Cloud UI, you will need to do the following:

1. Create a new directory for your extension and create a manifest.json file. This file contains metadata about your extension, including its name and permissions.
2. Add a permission for the Salesforce Marketing Cloud UI to your manifest.json file:

"permissions": [
    "https://*.s1.marketingcloudapps.com/*"
]

3. Create an HTML file that will contain your search bar. This file should have a form element with an input field and a submit button.

4. Create a JavaScript file that will handle the search functionality. This file should listen for the form’s submit event and send a request to the Salesforce Marketing Cloud API to search for data extensions, automations, and journeys based on the text entered in the input field.

5. Use the Chrome Extension API to inject your HTML and JavaScript files into the Salesforce Marketing Cloud UI when the extension is activated. Test your extension to make sure it works as expected.

Here is some example code for the manifest.json, HTML, and JavaScript files:

{
  "manifest_version": 2,
  "name": "Salesforce Marketing Cloud Search",
  "version": "1.0",
  "permissions": [
    "https://*.s1.marketingcloudapps.com/*"
  ],
  "content_scripts": [
    {
      "matches": ["https://*.s1.marketingcloudapps.com/*"],
      "css": ["style.css"],
      "js": ["search.js"],
      "run_at": "document_idle"
    }
  ]
}

The search bar should be able to locate data extensions, automations, and journeys based on text entered into the search bar. add detailed coding examples and snippets. Here is an example of the HTML file that contains the search bar:

<form id="search-form">
  <input type="text" id="search-input" placeholder="Search data extensions, automations, and journeys">
  <button type="submit">Search</button>
</form>

And here is an example of the JavaScript file that handles the search functionality:

const form = document.getElementById("search-form");
const input = document.getElementById("search-input");

form.addEventListener("submit", event => {
  event.preventDefault();

  const searchText = input.value;

  // Send a request to the Salesforce Marketing Cloud API to search for data extensions, automations, and journeys based on the search text
  // The API endpoint and required headers will depend on your specific setup
  fetch("https://api.s1.marketingcloudapps.com/search", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer YOUR_ACCESS_TOKEN"
    },
    body: JSON.stringify({
      searchText
    })
  })
  .then(response => response.json())
  .then(results => {
    // Process the search results and display them in the UI
  })
  .catch(error => {
    console.error(error);
  });
});

Finally, you can use the Chrome Extension API to inject your HTML and JavaScript files into the Salesforce Marketing Cloud UI when the extension is activated. Here is an example of how to do this in your background script:

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === "complete" && tab.url.startsWith("https://*.s1.marketingcloudapps.com/")) {
    chrome.tabs.executeScript(tabId, {
      file: "deselect.js"
    });
    chrome.tabs.insertCSS(tabId, {
      file: "style.css"
    });
  }
});

To display the search results in the UI, you can use the results returned by the Salesforce Marketing Cloud API and render them in the HTML file. Here is an example of how you might do this:

<div id="search-results">
  <!-- Render the search results here -->
</div>

// Process the search results and display them in the UI
const searchResultsContainer = document.getElementById("search-results");
searchResultsContainer.innerHTML = "";

results.forEach(result => {
  const resultElement = document.createElement("div");
  resultElement.innerHTML = `<h2>${result.name}</h2><p>${result.description}</p>`;
  searchResultsContainer.appendChild(resultElement);
});

You can also style the search bar and search results using CSS in the style.css file.

Remember to test your extension to make sure it works as expected. You can do this by installing the extension in Chrome and navigating to the Salesforce Marketing Cloud UI. When you enter text in the search bar and submit the form, the extension should send a request to the API and display the search results in the UI.