3

Can anyone please suggest how to add two Widgets/InputTextBoxes side by side in a Google Apps Script [Gmail Add-on] ?

Sample Code:

  var section = CardService.newCardSection();
  section.addWidget(
    CardService.newTextInput()
    .setTitle("Title1")
    .setFieldName("field1")
  );
  section.addWidget(
    CardService.newTextInput()    
    .setTitle("Title2")
    .setFieldName("title2")
  );

The above Google Apps script code creates two InputText fields one below the other in Gmail Add-on.

Is there any way to create two TextInputFields/Dropdowns/Widgets in a same row? [next to each other]

Something like these:

enter image description here enter image description here

Thanks,

Rubén
  • 34,714
  • 9
  • 70
  • 166
Naveen
  • 677
  • 1
  • 11
  • 27
  • 1
    Hi and welcome to Stack Overflow, please take a time to go through the [welcome tour](https://stackoverflow.com/tour) to know your way around here (and also to earn your first badge), read how to create a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) and also check [How to Ask Good Questions](https://stackoverflow.com/help/how-to-ask) so you increase your chances to get feedback and useful answers. – Mr.Rebot Aug 20 '18 at 21:12
  • Is that "sample image" something another add-on has already implemented? Or is it from something that is not required to be built with `CardService`? – tehhowch Aug 23 '18 at 14:33
  • Updated Gmail has 3 default Addons by Google. These addons has such kind of thing implemented.. – Naveen Aug 23 '18 at 15:03
  • @Naveen Calendar, Keep, and Tasks are not Add-ons, they are proprietary Google code. Google has no restrictions for what it adds, unlike third parties. – tehhowch Aug 27 '18 at 21:54

1 Answers1

3

Side-by-side (a.k.a. "in-line fields" in other products) can't currently be done, and will likely remain this way solely because of the width of the add-on sidebar. Google's style guide already recommends that you use a multi-line text input box if you are anticipating "more than a few words." I consider it unlikely for Google to extend their CardService implementation to add an "in-line" flag given their recommendation.

The reason for this restriction no doubt lies in the purpose of CardService:

The UI structures you build with this service are automatically available in both desktop and mobile devices, so you don't need to develop separate UIs for both.

and also stems from one of their "best practices":

If a given card has too many widgets, it can fill too much of the screen and become less useful. While large card sections render as collapsable UI elements, this hides information from the user. Aim to streamline your add-on and provide exactly what the user needs and no more.

With multiple text inputs on a single line, the display could become extremely crowded when viewing the add-on from a mobile device, even if it is still comfortable when viewed via desktop browser. Limitations on side-by-side layout are not unique to TextInputs. Other "side-by-side" widgets such as a Key-Value will not allow setting both a Button and a Switch.

Consider reviewing the available widgets on the Widget overview - images on the page detail the appearance of a wide variety of widgets and you may find something more suitable.

Alternately, consider creating a Feature Request for this functionality, or reviewing the existing Feature Requests in Google's Issue Tracker

Semi-related existing questions:

tehhowch
  • 9,645
  • 4
  • 24
  • 42
  • Is it possible for two dropdown Selection Widgets to be placed side-by-side ? – Naveen Aug 22 '18 at 04:39
  • @Naveen unlikely, for the same reasons. – tehhowch Aug 23 '18 at 13:17
  • But there exists few Gmail-Addons which do have two selection widgets(and input textboxes as well) placed side by side.. so, i think there should be some way to implement that... – Naveen Aug 23 '18 at 13:54
  • @Naveen then you should show these concrete examples in your question. – tehhowch Aug 23 '18 at 14:08
  • Updated the question with sample image. – Naveen Aug 23 '18 at 14:28
  • @Naveen is that taken from an existing Gmail addon? If yes, you should cite that add-on. If not, then it does not prove that what you want is possible. We understand your request without a sample image. – tehhowch Aug 23 '18 at 14:32
  • 1
    I just need to input start date & end date from the user in my Gmail Addon. Doesn't matter if its side-by-side or one below the other. Can you please answer this question, if possible ? https://stackoverflow.com/questions/51978305/how-to-create-a-datepicker-widget-in-google-apps-script-gmail-add-on . – Naveen Aug 23 '18 at 14:47
  • Updated Gmail has 3 default Addons by Google. These addons has such kind of thing implemented.. – Naveen Aug 23 '18 at 14:58
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/178625/discussion-between-naveen-and-tehhowch). – Naveen Aug 23 '18 at 15:33
  • Was this ever resolved? I would like to put two dropdowns horizontally as well. I just want to add a start hour and end hour, and would like them next to each other. They won't ever take up more than 100 or so horizontal pixels, so should look okay on mobile. – speedplane Mar 20 '21 at 18:45