Incorporating code within PopFlows

Incorporating code within PopFlows


Sometimes we find it much easier to write some code to do simple or even more complex tasks within a PopFlow. Either way, we have the flexibility to support code blocks in PopFlow.

 

Incorporating code within PopFlows is accomplished using two activities.

  1. Run Javascript : Which by definition,examples allows you to execute Javascript
  2. Dynamic UI : Generating HTML code directly into screenpop within the CRM.

 

đź’ˇ Download The PopFlow

Check out all the example in this lesson, and the PopFlow used.

 

Download

 

 

 

Let's review the basics!

Example of Run Javascript Activity

Example of Run Javascript Activity

 

Run Javascript Activity

  1. Search Activities for "javascript" or filter by selecting "Data"
  2. The results will pull up the Run Javascript Activity 

 

The activity allows you to insert your own Javascript in your PopFlow.

 


A Basic Javascript Example

  1. //lets make some sweet sweet javascript!ja
  2. alert("Hey there, welcome to a quick javascript example")
  3. var yourName = prompt("Enter your name", "Enter name"); 
  4. if (yourName != null) {  alert("Hello! "+ yourName)}

 

Running the basic test above, you will be prompted with three message alerts:

A quick intro and hello!

Prompting for your name

Prompting for your name

Displaying your name

Displaying your name

 

 

Sharing Data Between Activities & Workflows

Using the same example above, we can save yourName into a variable used further downstream in a PopFlow.

 

Let's first show what happens when you attempt to access yourName outside the “Initial Activity” or code block it was originally used within.

 

  1. Create a new “Run Javascript” activity below “Initial Activity” and use the following code:

alert (yourName)

Now run the test and view the Inspector's results. You should have now seen Four Alert Messages. However, you only saw three because we failed the last Run Javascript step.

 

  1. Click “Fail”
  2. Expand the JSON
  3. View the data returned.

 

Each “Run Javascript” activity is self-contained.

While the approach theoretically works, activities that come after it, even several steps away, won't be aware of the results because the "Run Javascript" activity executes its own Javascript.

 


We need to pass data into a “tempDataState” variable, to resolve this.

Edit the “Initial Activity” step to include:

 

  1. //lets make some sweet sweet javascript!
  2. alert("Hey there, welcome to a quick javascript example")
  3. var yourName = prompt("Enter your name", "Enter name"); 
  4. if (yourName != null) {  alert("Hello! "+ yourName)}
  5. //save the variable results into state.tempData.yourName for future use
  6. state.tempData.yourName = yourName

 

2. Then edit the next Run Javascript to include:


  1. //alert the browser again, from information saved in prev. step
  2. alert (state.tempData.yourName)

 

3. Re-Test!

 

Running the basic test above, you will be prompted with four message alerts:

A quick intro and hello!

Prompting for your name

Prompting for your name

Displaying your name

Displaying your name

Example of Data from Prev. Step showing in New Step

Example of Data from Prev. Step showing in New Step

 

 

Dynamic UI Activity with HTML

The Dynamic UI is extremely flexible and allows users to write HTML directly into their PopFlow ScreenPops.  

 

HTML can beautify screens, modals, and provide a cleaner experience when interacting with the CRM and User. To further our tests above, we'll implement a ScreenPop that takes the information directly from our Javascript example and displays it into a Modal on the CRM.

 

Previewing the HTML is easy: 

  1. Click on the “Eye”
  2. See Modal Preview

The above helps adjust the Modal width, height, and overall previewing information displayed from the HTML code.

 

đź’ˇ TIP: Using HTML Templates

You can always use pre-packaged HTML and uses information from “Set Value” activities to drive its content. This is helpful for those who do not want to edit HTML, understand HTML, and would like to benefit from common use cases using ScreenPop. 

 

 

Example Code: 

Note we've already added yourName into the HTML to show you how you can incorporate the value.

  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.    <title>User Name and Icon Display</title>
  6.    <style>
  7.        .box {
  8.            background-color: #f2f2f2;
  9.            border-radius: 10px;
  10.            padding: 20px;
  11.            width: 300px;
  12.            margin: 50px auto;
  13.            text-align: center;
  14.            box-shadow: 0 0 10px rgba(0,0,0,0.2);
  15.        }
  16.        
  17.        .box h1 {
  18.            font-size: 24px;
  19.            margin-bottom: 20px;
  20.        }
  21.        
  22.        .box img {
  23.            width: 100px;
  24.            height: 100px;
  25.            border-radius: 50%;
  26.            object-fit: cover;
  27.            margin-bottom: 20px;
  28.        }
  29.        
  30.    </style>
  31. </head>
  32. <body>
  33.    <div class="box">
  34.        <img src="https://img.icons8.com/?size=512&id=98957&format=png" alt="User Icon">
  35.        <h1>The name you provided in the Javascript example is: {yourName}</h1>
  36.    </div>
  37. </body>
  38. </html>

 

 

Example Code:

Having code logic increases the flexibility of what you can accomplish within a workflow! The examples below are helpful codes commonly used within PopFlow. 
 

Saving a variable into tempData

This example is probably one you'll use the most! We covered it above, however, this is the TL;DR version! The information returned into the tempData can be used throughout the interaction and in several workflows. 

 

The “interaction” is the execution of a PopFlow. In short, the data saved in the tempData element is only accessible during the life of the said interaction (PopFlow) and does not live outside of the interaction. 

 

Make sure to see the example “Updating Browsers LocalStorage”  to see how you could leverage a bit more information directly into the browser.

 

  1. //saving a variable into tempData
  2.                                var myVar = "MyVarsResult"
  3.                                state.tempData.myVar = myVar

 

 

Integer to String into tempData variable.

 
  1. state.tempData.textMasterId = state.interactionData.MasterId.toString();

 
 

JSON object into tempData

Formatting JSON and passing the results into Console as well as tempData:

 

  1. // JSON object
  2.                                var myJson = {
  3.                                "u_name": "John",
  4.                                "age": 30,
  5.                                "city": "New York"
  6.                                };
  7.                                // Accessing JSON data using JavaScript
  8.                                console.log(myJson.u_name); // Output: John
  9.                                console.log(myJson.age); // Output: 30
  10.                                console.log(myJson.city); // Output: New York
  11.                                    
  12.                                //sending JSON data into tempData
  13.                                state.tempData.u_name = myJson.u_name
  14.  

 

Updating the browser's LocalStorage

We use the example to update localstorage for later use by other workflows and automation.  

 

Here we are setting the currently active calls (using a callID) into localstorage.  While we clear this at the end of the call, it can be used by other PopFlows (e.g. OnTabChange & OnTabSave) to update the attached data for contextual screen pop.    
 

  1. localStorage.setItem('masterId',state.interactionData.MasterId);
  2.                                state.tempData.textMasterId = state.interactionData.MasterId.toString();
  3.                                console.log(localStorage.masterId + ' masterId recieved');
  4.                                console.log(state.tempData.textMasterId + "is the string Value")`

 

In the next block, you can see that we are reading the stored value for consumption by the OnTabSave workflow to update the screen pop table for transfers in Oracle.


  1.                                  state.tempData.masterId = localStorage.getItem('masterId');`
  2.                                  console.log(localStorage.getItem('masterId'));
                               

 

 

Encrypting Comments/Notes Fields


Oracle CRM requires any type of HTTPS Post for the “Comments/Notes” field to be encrypted.  
 

The below is how we used JavaScript to encrypt the comment before posting it to the CRM.

  1. let comments = state.tempData.comments;
  2.                                //alert(comments);
  3.                                // Define the string
  4.                                var decodedStringBtoA = (comments);
  5.                                // Encode the String
  6.                                var encodedStringBtoA = btoa(decodedStringBtoA);
  7.                                console.log(encodedStringBtoA);
  8.                                state.tempData.encodedStringBtoA = encodedStringBtoA;
  9.  
  10.  




    ​
    Still can’t find an answer?
    Send us a ticket and we will get back to you.

      • Related Articles

      • Pass data between PopFlows & Activities

        Between the Curly Brackets is where we'll live in this module! We'll connect the data produced from other activities and steps in your workflow together! Data exports are the "glue" that ties workflow actions & activities together. In this module, we ...

      • Open Source Code List

        OpenMethods CX Suite Open Source Code OpenMethods CX Suite includes proprietary OpenMethods code and the following open source components are associated with the solution. The following is a list of packages with the licensing information that was ...

      • Build, test and deploy PopFlows

        Once you master these concepts, you can build PopFlows from scratch! The module is about simplicity and getting you up to speed on how PopFlows are created & tested! Our goal today is around three main areas: Creating a PopFlow that will execute on ...

      • EOL Announcement: Harmony Horizontal Media Bar within Oracle Fusion CRM

        Impacts Oracle Fusion Service aka Oracle B2B CRM The information covered in the article below is only applicable for OpenMethods Harmony Media Bar within Oracle Fusion Service (Oracle B2B) EOL Announcement: Harmony Horizontal Media Bar within Oracle ...

      • Experience Designer Overview (University)

        What You'll Accomplish! Discover how to drive significant benefits from OpenMethods by mastering the fundamentals of creating PopFlows within Experience Designer. The training has three primary modules: 1. Creating PopFlows 2. Incorporating code ...