Google Apps Script - SetText to display array elements in a list or separate lines

Question

I have the following Working Code

function notifyNo(array1,array2,array3) {
  return CardService
     .newCardBuilder()
     .setHeader(
         CardService.newCardHeader()
             .setTitle('Draft Validation Check')
             .setSubtitle("Please validate the below recipients before sending out this message")
             .setImageStyle(CardService.ImageStyle.SQUARE)
             .setImageUrl('https://i.imgur.com/4uNXq15.png')
     )  
     .addSection(
          CardService.newCardSection()
              .setHeader('<b><font color="#FF0000">High-Risk Domains</font></b>')
              .addWidget(
                CardService.newTextParagraph().setText('<font color="#FF0000">'+array3.toString()+'</font>'))
     )
     .addSection(
          CardService.newCardSection()
              .setHeader('<b><font color="#CCCC00">Low-Risk Domains</font></b>')
              .addWidget(CardService.newTextParagraph().setText('<font color="#CCCC00">'+array2.toString()+'</font>'))
     )
     .addSection(
          CardService.newCardSection()
              .setHeader('<b><font color="#006400">Safe Domains</font></b>')
              .addWidget(CardService.newTextParagraph().setText('<font color="#006400">'+array1.toString()+'</font>'))
     )
     .build();
}

Which produces the below output:

I would like to:

• Make the elements presented in a list, rather than comma separated
• Is there anyway that I can control the background color for the three separate sections

Answer 1

You'll have to go through each value in each array and create a paragraph widget for each.

function notifyNo(array1, array2, array3)
{
    var highRiskDomains = CardService.newCardSection().setHeader('<b><font color="#FF0000">High-Risk Domains</font></b>');
    array3.forEach(function(value)
    {
        highRiskDomains.addWidget(CardService.newTextParagraph().setText('<font color="#FF0000">' + value + '</font>'));
    });

    var lowRiskDomains = CardService.newCardSection().setHeader('<b><font color="#CCCC00">Low-Risk Domains</font></b>');
    array2.forEach(function(value)
    {
        lowRiskDomains.addWidget(CardService.newTextParagraph().setText('<font color="#CCCC00">' + value + '</font>'));
    });

    var safeDomains = CardService.newCardSection().setHeader('<b><font color="#006400">Safe Domains</font></b>');
    array1.forEach(function(value)
    {
        safeDomains.addWidget(CardService.newTextParagraph().setText('<font color="#006400">' + value + '</font>'));
    });

    return CardService
        .newCardBuilder()
        .setHeader(
            CardService.newCardHeader()
                .setTitle('Draft Validation Check')
                .setSubtitle("Please validate the below recipients before sending out this message")
                .setImageStyle(CardService.ImageStyle.SQUARE)
                .setImageUrl('https://i.imgur.com/4uNXq15.png')
        )
        .addSection(highRiskDomains)
        .addSection(lowRiskDomains)
        .addSection(safeDomains)
        .build();
}