Google app script,gmail addon align action center and styling of TextInput

Question

I have create simple gmail addon using google script,in that i have struggle here,

i have used simple card,the problem is,we need align action button at center of the card and apply css styles to TextInput

i have refer the document,but dont find any methods

The below code i have tried,

var card = CardService.newCardBuilder();
  card.setHeader(CardService.newCardHeader().setTitle("Login Here"));
  var section = CardService.newCardSection()
  var cleint_id_Input = CardService.newTextInput()
     .setFieldName("client_id")
     .setTitle("Please enter clinet id")
  var username_Input = CardService.newTextInput()
     .setFieldName("username")
     .setTitle("Please enter username")
  var password_Input = CardService.newTextInput()
     .setFieldName("password")
     .setTitle("Please enter password")
  section.addWidget(cleint_id_Input)
  section.addWidget(username_Input)
  section.addWidget(password_Input)
  Logger.log("Input Value%s",cleint_id_Input)
  //Login action button
  var action = CardService.newAction().setFunctionName('loginCallback');
  section.addWidget(CardService.newTextButton().setText('Login').setOnClickAction(action))  
  card.addSection(section)

Thanks in advance

Haven't done much CSS styling in Apps Script but you can refer to their [CSS Package for Add-ons](https://developers.google.com/apps-script/add-ons/css) and [HTML Service: Best Practices](https://developers.google.com/apps-script/guides/html/best-practices#separate_html_css_and_javascript) as it involves tips on using CSS in AS. — ReyAnthonyRenacia, Feb 17 '18 at 16:21

score 4 · Answer 1 · answered Feb 23 '18 at 08:05

As of now gmail add ons do not support full styling of the input widgets. But there is a way we can do little formatting of the widgets. For more information please go through: https://developers.google.com/gmail/add-ons/concepts/widgets.

To align the button to center horizontally, you can use the following hack:

var whitespaces = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";

section.addWidget(CardService.newTextButton().setText(whitespaces + "button" + whitespaces).setOnClickAction(action));

score 0 · Answer 2 · answered Dec 24 '22 at 16:20

Here is a better way to do this with decoratedText:

function createRightButton(text, functionName) {
  var action = CardService.newAction()
    .setFunctionName(functionName);
  var button = CardService.newTextButton()
    .setText(text)
    .setOnClickAction(action)
    .setTextButtonStyle(CardService.TextButtonStyle.FILLED);
  var rightButton = CardService.newDecoratedText()
    .setButton(button)
    .setText(" ");

  return rightButton;
}

Google app script,gmail addon align action center and styling of TextInput

2 Answers2