Community Groups are officially here!
We've released Groups, a new feature that enables us to connect community members of similar industries and interests in a shared, private space. You can check out all of the details here, including information about who can join, how to join, and what Groups are currently offered. Please leave your feedback through this Community Groups Feedback Survey.

How to change the separator for piped text

AnthonyR
AnthonyR Tucson AzFounding Community Member, Community Member Superuser ✭✭✭✭
edited July 30 in Custom Code

Here is one that I have solved, and will post a solution after the beta finishes out, but till then would love to see everyone's solutions!

When using piped text, how can I change commas (or some other arbitrary character / value) to something else (line breaks, dashes, other words, etc.).

As I said, I have a solution, but I would love to see what you all come up with in the mean time.

Best Answer

  • AnthonyR
    AnthonyR Tucson AzFounding Community Member, Community Member Superuser ✭✭✭✭
    Accepted Answer

    @MartyK
    The most common use case I have seen is people wanting to display a list of selected options in a unique way. For instance instead of Dog, Cat, Bird, Fish; perhaps you want it to display as:

    Dog
    Cat
    Bird
    Fish

    As for how to achieve this, first pip your text in to a div or span html tag with the class "CommaReplacement", for example:

    Your answers are: <div class='CommaReplacement'>${q://QID1/ChoiceGroup/SelectedChoices}</div>

    Then, add the following JavaScript to your questions JavaScript editor, updating the newDelimiter to your desired effect:

    Qualtrics.SurveyEngine.addOnReady(function()
    {
        var textElements = this.questionContainer.select('.CommaReplacement');  
        var newDelimiter = "<br>"
    
        for(var i = 0; i<textElements.length; i++){
            var temp = textElements[i].innerHTML;
            console.log(temp);
            temp = temp.replace(new RegExp(", ", 'g'), newDelimiter);
            console.log(temp);
            textElements[i].innerHTML = temp;
        }
    
    });
    

    This will also work with multiple "CommaReplacement" tags in the same question. However it will only affect the current question.

    I have attached a QSF demo for this.

Answers

  • MartyK
    MartyK Community Member, Qualtrics Brand Admin Qubie ✭

    while we wait, can you share the use cases? You've got me curious about how you're thinking of the use for it? And how you're using it (not implementing)...

  • Kai_Chizuru
    Kai_Chizuru Community Member - Trial User Qubie ✭

    Hello, what should I do if I want to change only the commas in the piped text? I have attempted this method and it works only if I don't have other commas in the text. When I attempted to put the div around only the piped text, there is a space between the rest of the actual text. Please help me.

  • AnthonyR
    AnthonyR Tucson AzFounding Community Member, Community Member Superuser ✭✭✭✭

    @Kai_Chizuru You can do exactly what you mentioned except instead of placing the piped text in a div, place it in a using the same class name!

  • rhonnied1
    rhonnied1 Houston, TXCommunity Member Qubie ✭

    @AnthonyR - I tried your instructions for the e-mail trigger, however, I still get the horizontal list with the commas. Any ideas?

  • malush1412
    malush1412 IllinoisCommunity Member Qubie ✭

    Hello,

    Thanks so much for including this. It's working great for my survey. I have a question asking the user to select what they own among a long list of assets/debts. Then, on the follow-up question, I display all the assets/debts they indicated they own.

    Is there a way to add a bullet in front of each of the selected options where I'm piping them?

    So, in your example above, you would display:

    • Dog
    • Cat
    • Bird
    • Fish

    Thanks!

  • Diwere
    Diwere MassachusettsCommunity Member Qubie ✭

    Hello @Kai_Chizuru 

    How did you solve this issue? I have the same problem, and I would like the comma to separate each option. For example: if a) dog,cat b) cat, dog

    I want the result to be:

    -dog, cat

    -cat, dog