CODEWITHSUNDEEP
google-apps-scriptgmail-addons
Prateek Gupta
Prateek Gupta

Reputation: 1169

Dynamically Add Widget on user click in Gmail Add-on using CardService Appscript (GAS)

I am working on creating Gmail Add-on on one of my project. I got stuck on one scenario. I want to show user a dropdown and when user selects any value from this dropdown, I want to dynamically add a new label/texfield below dropdown which will show you the selected value. I am using newSelectionInput method of CardService to create a dropdown. Here's the code for it: 

var dueDateDropDown = CardService.newSelectionInput()
.setType(CardService.SelectionInputType.DROPDOWN)
.setTitle("Due Date")
.setFieldName("due_date")
.addItem("No due date", "one_value", true)
.addItem("Today", "two_value", false)
.addItem("Tomorrow", "three_value", false)
.addItem("This Friday", "four_value", false)
.addItem("Next Monday", "five_value", false)
.setOnChangeAction(CardService.newAction().setFunctionName('addLabel'))

So can someone help me writing the addLabel function which will add label widget. This is a function which I am trying to write:

 function addLabel(e){
  var selected = e.formInputs.due_date;

  // Activate temporary Gmail add-on scopes.
  var accessToken = e.messageMetadata.accessToken;
  GmailApp.setCurrentMessageAccessToken(accessToken);

  var messageId = e.messageMetadata.messageId;
  var message = GmailApp.getMessageById(messageId);
  var thread = message.getThread();

  Logger.log(message.getSubject());
  Logger.log(selected);
  // What should be the code for adding a label or textbox to the widget here.
}

Thanks in advance.

Upvotes: 1

Views: 1386

Answers (1)

Sunil
Sunil

Reputation: 441

You can do it by re-building the UI.

function buildAddOn(e){
  return buildUi(e);  
}


function buildUi(e,labelData){

  var dueDateDropDown = CardService.newSelectionInput()
  .setType(CardService.SelectionInputType.DROPDOWN)
  .setTitle("Due Date")
  .setFieldName("due_date")
  .addItem("No due date", "one_value", true)
  .addItem("Today", "two_value", false)
  .addItem("Tomorrow", "three_value", false)
  .addItem("This Friday", "four_value", false)
  .addItem("Next Monday", "five_value", false)
  .setOnChangeAction(CardService.newAction().setFunctionName('addLabel'))

   var section = CardService.newCardSection();   
  section.addWidget(dueDateDropDown);

  if(labelData){
     var label = CardService.newTextParagraph().setText(labelData);
    section.addWidget(label);
  }
 // e.somedata = true;
  var card = CardService.newCardBuilder()
  .addSection(section)
  .build();


  return card; 

}

function addLabel(e){
  Logger.log(e);
  var selected = e.formInputs.due_date.toString();
  return buildUi(e,selected);
}

Upvotes: 1

Related Questions