How can i build this type of UI in google script?

Question

I tried creating this UI in gmail addon using google script but not able to get this layout. i saw another app has implemented this. Please see the attached image for more details ! (https://i.ibb.co/jwnrggS/image-2.png) Can someone help me with this?

function getRedirect(pageId,title){
var redirectform = CardService.newAction()
    .setFunctionName('redirectCallback')
    .setParameters({page:pageId.toString()});
var redirectButton = CardService.newTextButton()
  .setText(title)
   .setOnClickAction(redirectform);
  return redirectButton;
}
function redirectCallback(e){
  var pageId = parseInt(e.parameters.page);
   var newCard,redirectBtn;
   if(pageId == 1){
  redirectBtn = getRedirect(2,"Next");
   newCard = CardService.newCardBuilder()
                 .setHeader(CardService.newCardHeader()
                                     .setTitle("Page2"))
                 .addSection(CardService.newCardSection()
                       .addWidget(CardService.newButtonSet()
                             .addButton(redirectBtn))).build()
   }
    var navigate = CardService.newNavigation().pushCard(newCard);
    return CardService.newActionResponseBuilder()
                   .setNavigation(navigate).build()  
   }

  function buildAddOn() {
      var header = getHeaderSection();
      var body = getBody();
      var submitForm = CardService.newAction()
                              .setFunctionName('openLinkCallback');
       var submitButton = CardService.newTextButton()
                                 .setText('Open Google')
                              .setOnClickAction(submitForm);
       var redirectBtn = getRedirectBtn(1,"Next");
       var mainCard = CardService
        .newCardBuilder()
        .addSection(CardService.newCardSection()
       .addWidget(CardService.newButtonSet().addButton(submitButton)))
       .addSection(CardService.newCardSection()             
       .addWidget(CardService.newButtonSet().addButton(redirectBtn)))
       .build();
   return mainCard;
}

This isn't a code writing service, you should at least include an attempt of your own in the question. — ross
– ross, Commented Jul 12, 2019 at 10:00
I tried many ways, i am able to do this in first page of my gmail addon. I have implemented navigation Using this. Stack of cards like this i am able to do in first page of my app but not able to implement in second as i can push only one card to card stack. Because of this i posted this question. @ross i have updated the question and added same code for first page. I wanted to implement the given example in second page. — vinay narayana
– vinay narayana, Commented Jul 12, 2019 at 11:20

ziganotschka · Accepted Answer · 2019-07-12 14:54:26Z

2

To build a custom card UI, you need to have a thorough look at the Google Card building architecture1., 2. and decide which features you want to implement in your card.

For example, the card in the image you attached, features a drowndown menu - here is the documentation about how to to select DROPDOWN as the SelectionInput Type.

As for the search field - you can insert a TextInput field and implement programatically a search function that checks if the user's input corresponds to an element of an array containing "channels" or "people".

The Card Service overview provides you documentaton of a wide range of methods to customize your Card UI.

answered Jul 12, 2019 at 14:54

ziganotschka

26.9k2 gold badges18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can i build this type of UI in google script?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related