CODEWITHSUNDEEP
google-apps-scriptgmail-addons
Jai Prak
Jai Prak

Reputation: 3400

How to create this UI in Gmail Add-on using Google Apps Script

Can someone tell me how to achieve below UI in Gmail Add-on using Google Apps Script? I tried KeyValue for the icon with text which is clickable and I am able to achieve that but I don't know how to put email text, next to the keyValue icon. Right now, I don't care about the position of the icon with counter and email text, I want them in the same row doesn't matter left or right. This is my code which is just showing icon with counter on the left side but not able to add email text anywhere.

var card = CardService.newCardBuilder()
.setHeader(
  CardService.newCardHeader()
    .setTitle('some Title')
);

 var section = CardService.newCardSection();

 var keyValue = CardService.newKeyValue()
  .setContent(getNumberOfPosts())
  .setIconUrl('https://ayz.png')
  .setOnClickAction(action);

 section.addWidget(keyValue);
 card.addSection(section);

enter image description here

Upvotes: 3

Views: 1282

Answers (1)

Michael Melo
Michael Melo

Reputation: 256

Take a look at this screenshot

enter image description here

I used an emoji for the eye (Add-on support emojis). Does this get you what you are looking for?

          settingSection.addWidget(CardService.newKeyValue()
                                      .setContent("[email protected]")
                                      .setOnClickAction(saveAction)
                                      .setButton(CardService.newTextButton()
                                                 .setText("👁️ 2")
                                                 .setOnClickAction(saveAction))
                                       );

Upvotes: 4

Related Questions