3

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

Jai Prak
  • 2,855
  • 4
  • 29
  • 37
  • Have you tried keyValue with setButton Method? – Bala Jun 25 '18 at 07:45
  • @Bala Yes, I tried ImageButton in KeyValue Button. Counter text will come on left side and icon on right. But I want user email and icon with counter text, side by side. – Jai Prak Jun 25 '18 at 08:03

1 Answers1

4

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("User@email.com")
                                      .setOnClickAction(saveAction)
                                      .setButton(CardService.newTextButton()
                                                 .setText("️ 2")
                                                 .setOnClickAction(saveAction))
                                       );
Michael Melo
  • 256
  • 1
  • 4