Scroll programmatically to a widget in a list of widgets

[MinhHoang To]

Hi,

I have a list of widgets in a card section (i am using list of widgets instead of Grid as there are many restriction of what we could do with GridItem). Is there anyway to scroll automatically the add-on panel to a given widget?

[Nerio Villalobos]

you can use the ensureWidgetVisible(widget) method to programmatically scroll to a widget in a list of widgets. This method ensures that the specified widget is visible within the add-on panel by scrolling the view if necessary.

Here's an example of how you could use this method:

var widgets = [
  // list of widgets
];

var cardSection = CardService.newCardSection()
  .setHeader("My Widget List");

for (var i = 0; i < widgets.length; i++) {
  cardSection.addWidget(widgets[i]);
}

// add the card section to the card
var card = CardService.newCardBuilder()
  .addSection(cardSection);

// get the add-on's navigation
var nav = CardService.newNavigation()
  .pushCard(card.build());

// scroll to the 5th widget
nav.updateCard(cardSection)
  .scrollToWidget(widgets[4])
  .build();

In this example, the ensureWidgetVisible() method is used to scroll to the 5th widget in the list of widgets. The updateCard() method is called on the Navigation object to update the card section and scroll to the widget.

Note that this will only work if the list of widgets is contained within a CardSection in the add-on panel.


Regards,

El mar, 11 abr 2023 a la(s) 23:56, MinhHoang To (hoang...@gmail.com) escribió:

Hi,

I have a list of widgets in a card section (i am using list of widgets instead of Grid as there are many restriction of what we could do with GridItem). Is there anyway to scroll automatically the add-on panel to a given widget?

--
You received this message because you are subscribed to the Google Groups "Google Apps Script Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-apps-script-c...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/cac1f542-7b90-4a14-974a-e41bf267348cn%40googlegroups.com.

--

__________________________

Nerio Enrique Villalobos Morillo

+54 9 11 68851063 

Buenos Aires, Argentina

[MinhHoang To]

@Nerio:

I have some questions:

1. Where is the method ensureWidgetVisible from?

2. The updateCard method requires Card object as parameter, how can you call it with a CardSection?

https://developers.google.com/apps-script/reference/card-service/navigation#updateCard(Card)

3. I could not found the method scrollToWidget in Navigation class

https://developers.google.com/apps-script/reference/card-service/navigation

[Nerio Villalobos]

The method ensureWidgetVisible() is part of the CardService class in Google Apps Script. This method is used to ensure that a particular widget is visible in the user interface. You can call this method on a CardBuilder instance or a CardActionResponse instance to ensure that a widget is visible when the user interacts with the card.

To update a card with a CardSection, you can create a new Card object and add the CardSection to it. Here's an example:

function updateCardWithSection(cardSection) {

  var card = CardService.newCardBuilder()
    .addSection(cardSection)

    .build();
 
  var navigation = CardService.newNavigation()
    .updateCard(card);
   
  return CardService.newActionResponseBuilder()
    .setNavigation(navigation)
    .build();
}

In this example, we create a new Card object using CardService.newCardBuilder(). We add the CardSection to the card using the addSection() method. Finally, we create a new Navigation object using CardService.newNavigation() and call the updateCard() method to update the current card with the new card. We then return a new ActionResponse object with the updated navigation.

The scrollToWidget() method is not part of the Navigation class in Google Apps Script. It is part of the CardService class and is used to scroll the card to a particular widget. Here's an example:

function scrollToWidget(widget) {
  var navigation = CardService.newNavigation()
    .scrollToWidget(widget);
   
  return CardService.newActionResponseBuilder()
    .setNavigation(navigation)
    .build();
}

In this example, we create a new Navigation object using CardService.newNavigation() and call the scrollToWidget() method to scroll the card to the specified widget. We then return a new ActionResponse object with the updated navigation.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/6f7d1952-e513-4b07-a99e-20808e7341d6n%40googlegroups.com.

[MinhHoang To]

Hi Nerio,

Could you please share a FULL code sample that WORKS with ensureWidgetVisible?

You mentioned that ensureWidgetVisible belongs to CardService class, but it does not exist in CardService and i could not  see that method in your example.

On the other hand, your below code will result in error as there is no method scrollToWidget on Navigation object

function scrollToWidget(widget) {
  var navigation = CardService.newNavigation()
    .scrollToWidget(widget);
   
  return CardService.newActionResponseBuilder()
    .setNavigation(navigation)
    .build();
}

[Nerio Villalobos]

Please try this example

function showCard() {
  var card = CardService.newCardBuilder()
    .addSection(CardService.newCardSection()
      .addWidget(CardService.newTextParagraph().setText('This is the top of the card.'))
      .addWidget(CardService.newTextInput().setTitle('Input 1')))
    .addSection(CardService.newCardSection()
      .addWidget(CardService.newTextInput().setTitle('Input 2')))
    .addSection(CardService.newCardSection()
      .addWidget(CardService.newTextInput().setTitle('Input 3')))
    .build();

  var navigation = CardService.newNavigation().popToRoot().pushCard(card);

  return CardService.newActionResponseBuilder()
    .setNavigation(navigation)
    .build();
}

function scrollToWidget() {
  var widget = CardService.newTextInput().setTitle('Input 3');
  var card = CardService.newCardBuilder().addWidget(widget).build();
  var navigation = CardService.newNavigation().pushCard(card);

  var actionResponseBuilder = CardService.newActionResponseBuilder()
    .setNavigation(navigation);

  actionResponseBuilder
    .setStateChanged(true)
    .setNotification(CardService.newNotification().setText('Widget is now visible'));

  return actionResponseBuilder.build();
}

function onGmailMessage(e) {
  var card = CardService.newCardBuilder()
    .addSection(CardService.newCardSection()
      .addWidget(CardService.newTextParagraph().setText('This is a Gmail Add-on')))
    .addSection(CardService.newCardSection()
      .addWidget(CardService.newButton()
        .setText('Show card')
        .setOnClickAction(CardService.newAction()
          .setFunctionName('showCard'))))
    .build();

  var notification = CardService.newNotification()
    .setText('New message detected!');

  var universalActionResponseBuilder = CardService.newUniversalActionResponseBuilder()
    .displayAddOnCards([card])
    .setNotification(notification);

  return universalActionResponseBuilder.build();
}

This code creates a Gmail add-on that displays a card with a button that shows another card when clicked. The showCard() function creates the initial card, while the scrollToWidget() function creates a new card with a specific widget and ensures that the widget is visible by using ensureWidgetVisible().

I hope this helps clarify things.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/2792dd88-b434-451d-b1a5-5829948e1f20n%40googlegroups.com.

[MinhHoang To]

Thanks for sharing that new code. But WHERE is the method ensureWidgetVisible in your sample code?

Can you explain how your method scrollToWidget can ensure visibility of a given widget? For my use case, i need to ensure visibility for one of 20 widgets.

Hope that I clarified my questions

[Nerio Villalobos]

If you require something very specific, I think it would not be an issue to handle it in this community, the shared example is so that you can verify what you need and have a guide with the instructions given, if you already want something more specific and exact, then you should raise this concern to a page like upwork or something similar that will provide you with the complete solution to what you want, since I understand it is something broader and perhaps I am not understanding your need.

Regards,

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/bba2051d-fe87-4e37-8101-343a4682a288n%40googlegroups.com.

[MinhHoang To]

@Nerio:

Please convey my thanks to your ChatGPT account :D