SFMC Code Editor

SFMC Code Editor: Develop and Validate Your Code Easily

Welcome to our SFMC Code Editor, a powerful tool designed to simplify and streamline the development process for Salesforce Marketing Cloud (SFMC) developers. Here are some key features and information about our editor:

Enhanced Development Experience

• Today, there are limited options for editors dedicated to SFMC scripting languages like AMPscript, SSJS, and HTML within SFMC itself. Our innovative solution bridges this gap by providing a user-friendly interface where developers can write, test, and validate their SFMC code efficiently.

Business Unit Integration

• We recommend implementing this editor for each business unit within your SFMC account. This approach ensures that developers can work within their designated environments, promoting organization and collaboration.

Code Structure Breakdown

Let's take a closer look at the key components of our SFMC Code Editor:

1. CSS Style Part

=================================================================

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Ampscript/SSJS Editor</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <style>

    body {

      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

      background-color: #f0f0f0;

      margin: 0;

      padding: 0;

    }

    .container {

      width: 80%;

      margin: 20px auto;

      background-color: #fff;

      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

      border-radius: 8px;

      overflow: hidden;

    }

    .editor-label {

      background-color: #4CAF50;

      color: #fff;

      padding: 10px;

      text-align: center;

      font-size: 24px;

      border-radius: 8px 8px 0 0;

    }

    #editor {

      height: 300px;

      width: 100%;

    }

    #result {

      padding: 10px;

      border-top: 1px solid #ccc;

      background-color: #f9f9f9;

      color: #333;

      font-size: 16px;

      line-height: 1.5;

      white-space: pre-wrap;

      margin-top: 20px;

      border-left: 5px solid transparent;

    }

    .run-button {

      display: block;

      margin: 0 auto;

      margin-top: 10px;

      padding: 8px 16px;

      font-size: 16px;

      cursor: pointer;

      background-color: #4CAF50;

      border: none;

      color: #fff;

      border-radius: 4px;

      transition: background-color 0.3s ease;

    }

    .run-button:hover {

      background-color: #45a049;

    }

  </style>

</head>

2. Spinner Implementation Part

=================================================================

<style>

    .spinner {

      border: 4px solid rgba(0, 0, 0, 0.1);

      border-left-color: #4CAF50;

      border-radius: 50%;

      width: 40px;

      height: 40px;

      animation: spin 1s linear infinite;

      margin: 20px auto;

      display: none; /* Initially hidden */

    }

    @keyframes spin {

      0% { transform: rotate(0deg); }

      100% { transform: rotate(360deg); }

    }

</style>

<body>

  <!-- Spinner element -->

<div class="container">

  <div id="spinner" class="spinner"></div>

</div>

</body>

3. Code Editor Part

=================================================================

<body>

  <div class="container">

    <div class="editor-label">Ampscript/SSJS Code Editor</div>

    <div id="editor"></div>

    <button id="sendData" onclick="runCode()" class="run-button">Run your code</button>

    <button onclick="clearCode()" class="run-button">Clear your code</button>

    <div id="spinner" class="spinner"></div> <!-- Spinner element -->

    <div id="result"></div>

  </div>

  <script>

    var editor = ace.edit("editor");

    editor.setTheme("ace/theme/twilight");

    editor.session.setMode("ace/mode/javascript");

    editor.setOptions({

      placeholder: "Enter your Ampscript or SSJS code here...",

      fontSize: "16px" // Optional: Set font size for placeholder text

    });

    function runCode() {

      var code = editor.getValue();

      try {

        var jsVariable = code.replace(/</g, "&lt;").replace(/>/g, "&gt;");

        $('#spinner').show(); // Show spinner

        $.ajax({

          type: "POST",

          url: "Processing_Page_Fle.txt",

          data: { jsVariable: jsVariable },

          success: function(response){

            console.log("Data sent successfully.");

            displayResult(response);

            $('#spinner').hide(); // Hide spinner on success

          },

          error: function(xhr, status, error){

            console.error("Error:", error);

            displayError(error);     

            $('#spinner').hide(); // Hide spinner on error

          }

        });

      } catch (error) {

        displayError(error);

        $('#spinner').hide(); // Hide spinner on exception

      }

    }

    function clearCode() {

      editor.setValue(""); // Clear the code in the editor

    }

    function displayResult(result) {

      var resultDiv = document.getElementById("result");

      resultDiv.innerHTML = "<b>Output:</b><br>" + result;

      resultDiv.style.backgroundColor = "#d9f9d9";

      resultDiv.style.borderLeftColor = "#4CAF50";

    }

    function displayError(error) {

      var resultDiv = document.getElementById("result");

      resultDiv.innerHTML = "<b>Error:</b><br>" + error;

      resultDiv.style.backgroundColor = "#f9d9d9";

      resultDiv.style.borderLeftColor = "#f44336";

    }

  </script>

</body>

4. Processing Page File

=================================================================

<script runat="server">

   Platform.Load("core", "1");

    try {

            var jsVariable = Request.GetFormField("jsVariable").replace(/\n/g, " ").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/^\s+|\s+$/g, '').replace(/^"|"$/g, '').replace(/\n\s+/g, '\n');

            var output = Platform.Function.TreatAsContent(jsVariable);

            Write(output);

    } catch (e) {

      Write(Stringify(e.message)); // Output any errors

    }

</script>

Continuous Improvement

We are committed to enhancing this editor based on user feedback and evolving SFMC best practices. Your input is invaluable in shaping the future of this tool, so please don't hesitate to share your thoughts and suggestions.

Start using our SFMC Code Editor today and experience a more efficient and seamless development workflow for your SFMC projects!