Sekcja karty

Widżet CardSection to kontener wysokiego poziomu na karcie. Sekcje kart służą do grupowania widżetów na karcie. Do każdej sekcji karty możesz dodać nagłówek i jeden lub więcej widżetów.

Możesz dodać sekcje z komunikatami i oknami.

Przykład

Oto karta składająca się z komponentu CardSection:

Reprezentacja i pola w formacie JSON

Zapis JSON 
{
  "header": string,
  "widgets": [
    {
      object (Widget)
    }
  ],
  "collapsible": boolean,
  "uncollapsibleWidgetsCount": integer
}
Pola
header

string

Tekst wyświetlany u góry sekcji. Obsługuje prosty tekst w formacie HTML. Więcej informacji o formatowaniu tekstu znajdziesz w artykułach Formatowanie tekstu w aplikacjach Google Chat i Formatowanie tekstu w dodatkach do Google Workspace.

widgets[]

object (Widget)

Wszystkie widżety w sekcji. Musi zawierać co najmniej jeden widżet.

collapsible

boolean

Wskazuje, czy ta sekcja jest zwijana.

Sekcje zwijane ukrywają niektóre lub wszystkie widżety. Jednak użytkownicy mogą je rozwinąć, aby wyświetlić ukryte widżety, klikając Pokaż więcej. Użytkownicy mogą ponownie ukryć widżety, klikając Pokaż mniej.

Aby określić, które widżety są ukryte, wybierz uncollapsibleWidgetsCount.

uncollapsibleWidgetsCount

integer

Liczba widżetów, których nie można zwijać, które pozostają widoczne nawet po zwinięciu sekcji.

Jeśli na przykład sekcja zawiera 5 widżetów, a uncollapsibleWidgetsCount ma wartość 2, pierwsze 2 widżety będą zawsze wyświetlane, a ostatnie 3 będą domyślnie zwinięte. uncollapsibleWidgetsCount jest brana pod uwagę tylko wtedy, gdy collapsible ma wartość true.

Widżet

Każda karta składa się z widżetów.

Widżet to obiekt złożony, który może reprezentować jeden z tekstów, obrazów, przycisków i innych typów obiektów.

Zapis JSON 
{
  "horizontalAlignment": enum (HorizontalAlignment),

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  },
  "divider": {
    object (Divider)
  },
  "grid": {
    object (Grid)
  },
  "columns": {
    object (Columns)
  }
  // End of list of possible types for union field data.
}
Pola
horizontalAlignment

enum (HorizontalAlignment)

Określa, czy widżety mają być wyrównywane do lewej, do prawej czy do środka kolumny.

Pole sumy data. Widżet może zawierać tylko jeden z poniższych elementów. Aby wyświetlić więcej elementów, możesz użyć wielu pól widżetu. data może mieć tylko jeden z tych parametrów:
textParagraph

object (TextParagraph)

Wyświetla akapit tekstu. Obsługuje prosty tekst w formacie HTML. Więcej informacji o formatowaniu tekstu znajdziesz w artykułach Formatowanie tekstu w aplikacjach Google Chat i Formatowanie tekstu w dodatkach do Google Workspace.

Na przykład ten kod JSON tworzy pogrubienie: 

"textParagraph": {
  "text": "  <b>bold text</b>"
}
image

object (Image)

Wyświetla obraz.

Na przykład ten kod JSON tworzy obraz z tekstem alternatywnym: 

"image": {
  "imageUrl":
  "https://developers.google.com/chat/images/quickstart-app-avatar.png",
  "altText": "Chat app avatar"
}
decoratedText

object (DecoratedText)

Wyświetla ozdobiony element tekstowy.

Na przykład ten kod JSON tworzy ozdobny widżet tekstowy z adresem e-mail: 

"decoratedText": {
  "icon": {
    "knownIcon": "EMAIL"
  },
  "topLabel": "Email Address",
  "text": "sasha@example.com",
  "bottomLabel": "This is a new Email address!",
  "switchControl": {
    "name": "has_send_welcome_email_to_sasha",
    "selected": false,
    "controlType": "CHECKBOX"
  }
}
buttonList

object (ButtonList)

Lista przycisków.

Na przykład poniższy kod JSON tworzy 2 przyciski. Pierwszy to niebieski przycisk tekstowy, a drugi to przycisk graficzny, który otwiera link: 

"buttonList": {
  "buttons": [
    {
      "text": "Edit",
      "color": {
        "red": 0,
        "green": 0,
        "blue": 1,
        "alpha": 1
      },
      "disabled": true,
    },
    {
      "icon": {
        "knownIcon": "INVITE",
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    }
  ]
}
textInput

object (TextInput)

Wyświetla pole tekstowe, w którym użytkownicy mogą wpisywać tekst.

Na przykład ten kod JSON tworzy pole tekstowe do adresu e-mail: 

"textInput": {
  "name": "mailing_address",
  "label": "Mailing Address"
}

Poniższy przykładowy kod JSON tworzy dane wejściowe w przypadku języka programowania ze statycznymi sugestiami: 

"textInput": {
  "name": "preferred_programing_language",
  "label": "Preferred Language",
  "initialSuggestions": {
    "items": [
      {
        "text": "C++"
      },
      {
        "text": "Java"
      },
      {
        "text": "JavaScript"
      },
      {
        "text": "Python"
      }
    ]
  }
}
selectionInput

object (SelectionInput)

Wyświetla element sterujący, który pozwala użytkownikom wybierać elementy. Elementami sterującymi wyboru mogą być pola wyboru, przyciski, przełączniki lub menu rozwijane.

Na przykład ten plik JSON tworzy menu, które pozwala użytkownikom wybrać rozmiar: 

"selectionInput": {
  "name": "size",
  "label": "Size"
  "type": "DROPDOWN",
  "items": [
    {
      "text": "S",
      "value": "small",
      "selected": false
    },
    {
      "text": "M",
      "value": "medium",
      "selected": true
    },
    {
      "text": "L",
      "value": "large",
      "selected": false
    },
    {
      "text": "XL",
      "value": "extra_large",
      "selected": false
    }
  ]
}
dateTimePicker

object (DateTimePicker)

Wyświetla widżet, który umożliwia użytkownikom wpisywanie daty, godziny lub daty i godziny.

Na przykład poniższy kod JSON tworzy selektor daty i godziny, aby zaplanować spotkanie: 

"dateTimePicker": {
  "name": "appointment_time",
  "label": "Book your appointment at:",
  "type": "DATE_AND_TIME",
  "valueMsEpoch": "796435200000"
}
divider

object (Divider)

Wyświetla poziomą linię podziału między widżetami.

Separator w kodzie JSON tworzy na przykład: 

"divider": {
}
grid

object (Grid)

Wyświetla siatkę z kolekcją elementów.

Siatka obsługuje dowolną liczbę kolumn i elementów. Liczba wierszy jest określana przez górne granice liczby elementów podzielone przez liczbę kolumn. Siatka zawierająca 10 elementów i 2 kolumny zawiera 5 wierszy. Siatka zawierająca 11 elementów i 2 kolumny zawiera 6 wierszy.

Na przykład poniższy kod JSON tworzy siatkę z 2 kolumnami z 1 elementem: 

"grid": {
  "title": "A fine collection of items",
  "columnCount": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4
  },
  "items": [
    {
      "image": {
        "imageUri": "https://www.example.com/image.png",
        "cropStyle": {
          "type": "SQUARE"
        },
        "borderStyle": {
          "type": "STROKE"
        }
      },
      "title": "An item",
      "textAlignment": "CENTER"
    }
  ],
  "onClick": {
    "openLink": {
      "url": "https://www.example.com"
    }
  }
}
columns

object (Columns)

Wyświetla do 2 kolumn.

Aby uwzględnić więcej niż 2 kolumny lub użyć wierszy, użyj widżetu Grid.

Na przykład ten plik JSON tworzy 2 kolumny. Każda z nich zawiera akapity tekstu: 

"columns": {
  "columnItems": [
    {
      "horizontalSizeStyle": "FILL_AVAILABLE_SPACE",
      "horizontalAlignment": "CENTER",
      "verticalAlignment": "CENTER",
      "widgets": [
        {
          "textParagraph": {
            "text": "First column text paragraph"
          }
        }
      ]
    },
    {
      "horizontalSizeStyle": "FILL_AVAILABLE_SPACE",
      "horizontalAlignment": "CENTER",
      "verticalAlignment": "CENTER",
      "widgets": [
        {
          "textParagraph": {
            "text": "Second column text paragraph"
          }
        }
      ]
    }
  ]
}

Rozwiązywanie problemów

Gdy aplikacja lub karta Google Chat zwróci błąd, w interfejsie czatu pojawi się komunikat „Coś poszło nie tak” lub „Nie udało się przetworzyć Twojego żądania”. Czasami w interfejsie Google Chat nie pojawia się żaden komunikat o błędzie, ale aplikacja lub karta Google Chat mogą dać nieoczekiwany wynik, na przykład komunikat na karcie.

Mimo że komunikat o błędzie może nie wyświetlić się w interfejsie Google Chat, dostępne są opisowe komunikaty o błędach i dane dziennika, które pomogą Ci naprawić błędy występujące po włączeniu rejestrowania błędów w aplikacjach do obsługi czatu. Więcej informacji o wyświetlaniu, debugowaniu i naprawianiu błędów znajdziesz w artykule Rozwiązywanie problemów z Google Chat i rozwiązywanie problemów.