इस पेज का अनुवाद Cloud Translation API से किया गया है.

विजेट

विजेट ऐसा यूज़र इंटरफ़ेस (यूआई) एलिमेंट होता है जो इनमें से एक या एक से ज़्यादा जानकारी देता है:

अन्य विजेट का स्ट्रक्चर, जैसे कि कार्ड और सेक्शन,
उपयोगकर्ता को दी जाने वाली जानकारी, जैसे कि टेक्स्ट और इमेज या
काम करने की सुविधाएं, जैसे कि बटन, टेक्स्ट इनपुट फ़ील्ड या चेकबॉक्स.

कार्ड सेक्शन में जोड़े गए विजेट के सेट, पूरे ऐड-ऑन यूज़र इंटरफ़ेस (यूआई) को तय करते हैं. विजेट, वेब और मोबाइल डिवाइस, दोनों पर एक जैसे दिखते हैं. साथ ही, ये काम करते हैं. रेफ़रंस दस्तावेज़ में विजेट सेट बनाने के कई तरीकों के बारे में बताया गया है.

ऐड-ऑन विजेट को आम तौर पर तीन ग्रुप में बांटा जाता है: स्ट्रक्चरल विजेट, जानकारी देने वाले विजेट, और उपयोगकर्ता इंटरैक्शन विजेट.

स्ट्रक्चरल विजेट

स्ट्रक्चरल विजेट, यूज़र इंटरफ़ेस (यूआई) में इस्तेमाल किए जाने वाले दूसरे विजेट के लिए कंटेनर और व्यवस्थित करने की सुविधा देते हैं.

बटन सेट—एक या उससे ज़्यादा टेक्स्ट या इमेज बटन का कलेक्शन, जिन्हें हॉरिज़ॉन्टल लाइन में एक साथ रखा गया है.
कार्ड—एक कॉन्टेक्स्ट कार्ड, जिसमें एक या उससे ज़्यादा कार्ड सेक्शन होते हैं. कार्ड नेविगेशन को कॉन्फ़िगर करके, यह तय किया जाता है कि उपयोगकर्ता एक कार्ड से दूसरे कार्ड पर कैसे जा सकते हैं.
कार्ड हेडर—किसी दिए गए कार्ड का हेडर. कार्ड के हेडर में टाइटल, सबटाइटल, और इमेज हो सकती है. अगर ऐड-ऑन इनका इस्तेमाल करता है, तो कार्ड ऐक्शन और यूनिवर्सल ऐक्शन, कार्ड के हेडर में दिखते हैं.
कार्ड सेक्शन—यह विजेट का इकट्ठा किया गया ग्रुप है. इसे हॉरिज़ॉन्टल नियम के हिसाब से दूसरे कार्ड सेक्शन से अलग किया जाता है. साथ ही, इसमें सेक्शन हेडर वैकल्पिक होता है. हर कार्ड में कम से कम एक कार्ड सेक्शन होना चाहिए. कार्ड सेक्शन में, कार्ड या कार्ड के हेडर नहीं जोड़े जा सकते.

स्ट्रक्चरल विजेट

चेतावनी: किसी एक कंटेनर में कोई विजेट जोड़ने का मतलब है कि उस विजेट की कॉपी बनाई जा रही है और जोड़ी जा रही है. अगर विजेट को जोड़ने के बाद उसमें बदलाव किया जाता है, तो यह बदलाव इंटरफ़ेस में नहीं दिखेगा. इसलिए, विजेट जोड़ने से पहले हमेशा यह पक्का कर लें कि वह पूरा हो. अगर आपको किसी विजेट को जोड़ने के बाद उसे बदलना है, तो आपको पूरे कार्ड सेक्शन या कार्ड को फिर से बनाना होगा. ज़्यादा जानकारी के लिए, कार्ड बनाना देखें.

इन बुनियादी स्ट्रक्चर वाले विजेट के अलावा, Google Workspace ऐड-ऑन में कार्ड सेवा का इस्तेमाल करके, मौजूदा कार्ड को ओवरलैप करने वाले स्ट्रक्चर बनाए जा सकते हैं: फ़िक्स्ड फ़ुटर और पीक कार्ड:

फ़िक्स्ड फ़ुटर

कार्ड के सबसे नीचे, बटन की एक तय लाइन जोड़ी जा सकती है. यह लाइन, कार्ड के बाकी कॉन्टेंट के साथ न तो मूव होती है और न ही स्क्रोल होती है.

ठीक किए गए फ़ुटर विजेट का उदाहरण

नीचे दिए गए कोड का हिस्सा, फ़िक्स्ड फ़ुटर के उदाहरण की पहचान करने और उसे किसी कार्ड में जोड़ने का तरीका बताता है:

var fixedFooter = CardService.newFixedFooter()
    .setPrimaryButton(
        CardService.newTextButton()
            .setText("Primary")
            .setOpenLink(CardService.newOpenLink()
                .setUrl("https://www.google.com")))
    .setSecondaryButton(
        CardService.newTextButton()
            .setText("Secondary")
            .setOnClickAction(
                CardService.newAction()
                    .setFunctionName(
                        "secondaryCallback")));

var card = CardService.newCardBuilder()
    // (...)
    .setFixedFooter(fixedFooter)
    .build();

पीक कार्ड

पीक कार्ड का उदाहरण

जब उपयोगकर्ता की कार्रवाई से, Gmail मैसेज खोलने जैसी कोई नई संदर्भ कॉन्टेंट ट्रिगर होता है, तो ऐसे में या तो मौजूदा कॉन्टेंट को तुरंत (डिफ़ॉल्ट व्यवहार) दिखाया जा सकता है या साइडबार में सबसे नीचे ताज़ा जानकारी के लिए सूचना दिखाई जा सकती है. अगर कोई उपयोगकर्ता आपके होम पेज पर वापस जाने के लिए, 'वापस जाएं' पर क्लिक करता है, तो एक झलक कार्ड दिखता है. इससे उपयोगकर्ताओं को कॉन्टेक्स्ट के हिसाब से उपलब्ध कॉन्टेंट को फिर से ढूंढने में मदद मिलती है.

संदर्भ के हिसाब से नया कॉन्टेंट उपलब्ध होने पर, उसकी झलक दिखाने वाला कार्ड तुरंत दिखाने के लिए, तुरंत अपनी CardBuilder क्लास में .setDisplayStyle(CardService.DisplayStyle.PEEK) जोड़ें. झलक दिखाने वाला कार्ड सिर्फ़ तब दिखता है, जब एक ही कार्ड ऑब्जेक्ट आपके संदर्भ ट्रिगर के साथ मिलता है. ऐसा न होने पर, वापस दिखाए जाने वाले कार्ड, मौजूदा कार्ड की जगह तुरंत दिखने लगते हैं.

झलक वाले कार्ड के हेडर को पसंद के मुताबिक बनाने के लिए, संदर्भ वाला कार्ड बनाते समय, स्टैंडर्ड CardHeader ऑब्जेक्ट के साथ .setPeekCardHeader() तरीका जोड़ें. डिफ़ॉल्ट रूप से, 'पीक कार्ड' के हेडर में सिर्फ़ आपके ऐड-ऑन का नाम होता है.

पसंद के मुताबिक झलक दिखाने वाले कार्ड का उदाहरण

यह कोड, Cats Google Workspace ऐड-ऑन क्विकस्टार्ट पर आधारित है. यह पीक कार्ड से उपयोगकर्ताओं को काम के नए कॉन्टेंट के बारे में बताता है. साथ ही, यह Peek कार्ड के हेडर को पसंद के मुताबिक बनाता है, ताकि चुने गए Gmail मैसेज थ्रेड का विषय दिखाया जा सके.

var peekHeader = CardService.newCardHeader()
    .setTitle('Contextual Cat')
    .setImageUrl('https://www.gstatic.com/images/
        icons/material/system/1x/pets_black_48dp.png')
    .setSubtitle(text);

. . .

var card = CardService.newCardBuilder()
    .setDisplayStyle(CardService.DisplayStyle.PEEK)
    .setPeekCardHeader(peekHeader);

जानकारी देने वाले विजेट

जानकारी देने वाले विजेट, लोगों को जानकारी देते हैं.

Image—यह आपके होस्ट किए गए और सार्वजनिक तौर पर उपलब्ध यूआरएल से जुड़ी इमेज है.
DecoratedText—टेक्स्ट कॉन्टेंट स्ट्रिंग, जिसे दूसरे एलिमेंट के साथ जोड़ा जा सकता है. जैसे, ऊपर और नीचे के टेक्स्ट लेबल, इमेज या आइकॉन. डेकोरेट किए गए टेक्स्ट विजेट में बटन या स्विच विजेट भी शामिल हो सकता है. जोड़े गए स्विच, टॉगल या चेकबॉक्स हो सकते हैं. decorationdText विजेट के कॉन्टेंट टेक्स्ट में एचटीएमएल फ़ॉर्मैटिंग का इस्तेमाल हो सकता है. ऊपर और नीचे के लेबल में सादा टेक्स्ट होना चाहिए.
टेक्स्ट पैराग्राफ़— टेक्स्ट पैराग्राफ़, जिसमें एचटीएमएल फ़ॉर्मैट वाले एलिमेंट शामिल हो सकते हैं.

जानकारी देने वाले विजेट

यूज़र इंटरैक्शन विजेट

उपयोगकर्ता इंटरैक्शन विजेट की मदद से, ऐड-ऑन उपयोगकर्ताओं की कार्रवाइयों के जवाब दे सकता है. आप इन विजेट को कार्रवाई जवाबों के साथ कॉन्फ़िगर कर सकते हैं. जैसे, अलग-अलग कार्ड दिखाने, यूआरएल खोलने, सूचनाएं दिखाने, ड्राफ़्ट ईमेल लिखने या दूसरे Apps Script फ़ंक्शन चलाने के लिए. ज़्यादा जानकारी के लिए, इंटरैक्टिव कार्ड बनाने की गाइड देखें.

कार्ड ऐक्शन—ऐड-ऑन हेडर बार मेन्यू में मौजूद मेन्यू आइटम. हेडर बार मेन्यू में यूनिवर्सल ऐक्शन के तौर पर बताए गए आइटम भी शामिल हो सकते हैं, जो ऐड-ऑन के बताए गए हर कार्ड पर दिखते हैं.
DateTime पिकर—विजेट की मदद से उपयोगकर्ता तारीख, समय या दोनों चुन सकते हैं. ज़्यादा जानकारी के लिए नीचे तारीख और समय चुनने वाले टूल देखें.
इमेज बटन—यह ऐसा बटन है जो टेक्स्ट के बजाय इमेज का इस्तेमाल करता है. पहले से तय किए गए कई आइकॉन में से किसी एक या सार्वजनिक तौर पर होस्ट की गई इमेज का इस्तेमाल किया जा सकता है. इसे यूआरएल से दिखाया जाता है.
चुने गए इनपुट का इनपुट—यह एक इनपुट फ़ील्ड है, जो विकल्पों का कलेक्शन दिखाता है. चुने गए इनपुट विजेट चेकबॉक्स, रेडियो बटन या ड्रॉप-डाउन सलेक्शन बॉक्स के तौर पर मौजूद होते हैं.
स्विच करें—टॉगल विजेट. आप सिर्फ़ DecoratedText विजेट के साथ स्विच का इस्तेमाल कर सकते हैं. डिफ़ॉल्ट रूप से, ये टॉगल स्विच के तौर पर दिखते हैं, लेकिन इनकी वजह से इन्हें चेकबॉक्स के तौर पर दिखाया जा सकता है.
टेक्स्ट बटन—टेक्स्ट लेबल वाला बटन. आप टेक्स्ट बटन के लिए बैकग्राउंड का रंग भर सकते हैं (डिफ़ॉल्ट यह पारदर्शी होती है). ज़रूरत पड़ने पर बटन को बंद भी किया जा सकता है.
टेक्स्ट इनपुट—टेक्स्ट इनपुट फ़ील्ड. विजेट में शीर्षक, संकेत, और कई लाइनों वाला टेक्स्ट हो सकता है. टेक्स्ट की वैल्यू में बदलाव होने पर, विजेट कार्रवाइयां ट्रिगर कर सकता है.
ग्रिड—कई कॉलम वाला लेआउट, जो आइटम का कलेक्शन दिखाता है. आइटम को किसी इमेज, शीर्षक, और सबटाइटल की मदद से दिखाया जा सकता है. साथ ही, बॉर्डर और काटने की स्टाइल जैसे कई कस्टमाइज़ेशन विकल्प भी दिए जा सकते हैं.

`DecoratedText` चेकबॉक्स

ऐसे DecoratedText विजेट को सेट किया जा सकता है जिसमें चेकबॉक्स या बाइनरी टॉगल स्विच के बजाय, चेकबॉक्स मौजूद हो. स्विच की तरह ही, चेकबॉक्स की वैल्यू ऐक्शन इवेंट ऑब्जेक्ट में शामिल होती है. इसे setOnClickAction(action) तरीके से, इस DecoratedText से अटैच किए गए Action को भेजा जाता है.

सजाए गए टेक्स्ट वाले चेकबॉक्स विजेट का उदाहरण

कोड का नीचे दिया गया हिस्सा, चेकबॉक्स DecoratedText विजेट को तय करने का तरीका दिखाता है, जिसे बाद में कार्ड में जोड़ा जा सकता है:

var decoratedText = CardService.newDecoratedText()
    // (...)
    .setSwitch(CardService.newSwitch()
        .setFieldName('form_input_switch_key')
        .setValue('switch_is_on')
        .setControlType(
            CardService.SwitchControlType.CHECK_BOX));

तारीख और समय चुनने वाले टूल

ऐसे विजेट बनाए जा सकते हैं जिनकी मदद से उपयोगकर्ता समय, तारीख या दोनों चुन सकते हैं. पिकर की वैल्यू बदलने पर, विजेट हैंडलर फ़ंक्शन असाइन करने के लिए, setOnChangeAction() का इस्तेमाल करें.

पसंद के मुताबिक झलक दिखाने वाले कार्ड का उदाहरण

नीचे दिए गए कोड से, सिर्फ़ तारीख चुनने वाला टूल, सिर्फ़ समय चुनने वाला पिकर, और 'तारीख और समय चुनने वाला टूल' तय करने का तरीका बताया गया है. इसके बाद, इन्हें किसी कार्ड में जोड़ा जा सकता है:

var dateOnlyPicker = CardService.newDatePicker()
    .setTitle("Enter a date")
    .setFieldName("date_field")
    // Set default value as May 24 2019. Either a
    // number or string is acceptable.
    .setValueInMsSinceEpoch(1558668600000)
    .setOnChangeAction(CardService.newAction()
        .setFunctionName("handleDateChange"));

var timeOnlyPicker = CardService.newTimePicker()
    .setTitle("Enter a time")
    .setFieldName("time_field")
    // Set default value as 23:30.
    .setHours(23)
    .setMinutes(30)
    .setOnChangeAction(CardService.newAction()
        .setFunctionName("handleTimeChange"));

var dateTimePicker = CardService.newDateTimePicker()
    .setTitle("Enter a date and time")
    .setFieldName("date_time_field")
    // Set default value as May 24 2019 03:30 AM UTC.
    // Either a number or string is acceptable.
    .setValueInMsSinceEpoch(1558668600000)
    // EDT time is 4 hours behind UTC.
    .setTimeZoneOffsetInMins(-4 * 60)
    .setOnChangeAction(CardService.newAction()
        .setFunctionName("handleDateTimeChange"));

यहां तारीख-समय पिकर विजेट हैंडलर फ़ंक्शन का एक उदाहरण दिया गया है. यह हैंडलर फ़ॉर्मैट करता है और तारीख और समय चुनने वाले विजेट के साथ, उपयोगकर्ता के चुने गए तारीख और समय को दिखाने वाली एक स्ट्रिंग लॉग करता है. इस विजेट का आईडी "myDateTime PickerWidgetID" होता है:

function handleDateTimeChange(event) {
  var dateTimeInput =
    event.commonEventObject.formInputs["myDateTimePickerWidgetID"];
  var msSinceEpoch = dateTimeInput.msSinceEpoch;
  var hasDate = dateTimeInput.hasDate;
  var hasTime = dateTimeInput.hadTime;

  // The following requires you to configure the add-on to read user locale
  // and timezone.
  // See https://developers.google.com/apps-script/add-ons/how-tos/access-user-locale
  var userTimezoneId = event.userTimezone.id;

  // Format and log the date-time selected using the user's timezone.
  var formattedDateTime;
  if (hasDate && hasTime) {
    formattedDateTime = Utilities.formatDate(
      new Date(msSinceEpoch), userTimezoneId, "yyy/MM/dd hh:mm:ss");
  } else if (hasDate) {
    formattedDateTime = Utilities.formatDate(
      new Date(msSinceEpoch), userTimezoneId, "yyy/MM/dd")
      + ", Time unspecified";
  } else if (hasTime) {
    formattedDateTime = "Date unspecified, "
      + Utilities.formatDate(
          new Date(msSinceEpoch), userTimezoneId, "hh:mm a");
  }

  if (formattedDateTime) {
    console.log(formattedDateTime);
  }
}

नीचे दी गई टेबल में, डेस्कटॉप और मोबाइल डिवाइसों पर पिकर चुनने के यूज़र इंटरफ़ेस (यूआई) के उदाहरण दिए गए हैं. चुने जाने पर, तारीख चुनने वाला टूल महीने के हिसाब से कैलेंडर का यूज़र इंटरफ़ेस (यूआई) खोलता है. इससे उपयोगकर्ता फटाफट नई तारीख चुन सकते हैं.

जब उपयोगकर्ता डेस्कटॉप डिवाइसों पर टाइम पिकर चुनता है, तो एक ड्रॉप-डाउन मेन्यू खुलता है. इसमें समय की सूची 30 मिनट के हिसाब से अलग-अलग होती है और उपयोगकर्ता इसमें से चुन सकता है. उपयोगकर्ता कोई खास समय भी टाइप कर सकता है. मोबाइल डिवाइस पर टाइम पिकर चुनने से, डिवाइस में पहले से मौजूद "घड़ी" टाइम पिकर खुल जाता है.

डेस्कटॉप	मोबाइल

GRid

आइटम को ग्रिड विजेट की मदद से, कई कॉलम वाले लेआउट में दिखाएं. हर आइटम में एक इमेज, शीर्षक, और सबटाइटल हो सकते हैं. ग्रिड आइटम में इमेज के मुकाबले टेक्स्ट की जगह तय करने के लिए, कॉन्फ़िगरेशन के अतिरिक्त विकल्पों का इस्तेमाल करें.

आपके पास ग्रिड आइटम को ऐसे आइडेंटिफ़ायर के साथ कॉन्फ़िगर करने का विकल्प होता है जो ग्रिड पर तय की गई कार्रवाई के लिए पैरामीटर के तौर पर दिखता है.

ग्रिड विजेट का उदाहरण

var gridItem = CardService.newGridItem()
  .setIdentifier("item_001")
  .setTitle("Lucian R.")
  .setSubtitle("Chief Information Officer")
  .setImage(imageComponent);

var cropStyle = CardService.newImageCropStyle()
  .setImageCropType(CardService.ImageCropType.RECTANGLE_4_3);

var imageComponent = CardService.newImageComponent()
  .setImageUrl("https://developers.google.com/workspace/
      images/cymbal/people/person1.jpeg")
  .setCropStyle(cropStyle)

var grid = CardService.newGrid()
  .setTitle("Recently viewed")
  .addItem(gridItem)
  .setNumColumns(2)
  .setOnClickAction(CardService.newAction()
    .setFunctionName("handleGridItemClick"));

टेक्स्ट का फ़ॉर्मैट

कुछ टेक्स्ट-आधारित विजेट, आसान टेक्स्ट एचटीएमएल फ़ॉर्मैटिंग का इस्तेमाल कर सकते हैं. इन विजेट का टेक्स्ट कॉन्टेंट सेट करते समय, सिर्फ़ उनसे जुड़े एचटीएमएल टैग शामिल करें.

यहां इस्तेमाल किए जा सकने वाले टैग और उनके मकसद को इस टेबल में दिखाया गया है:

फ़ॉर्मैट	उदाहरण	रेंडर किया गया नतीजा
बोल्ड	`"This is <b>bold</b>."`	इसे बोल्ड किया गया है.
इटैलिक	`"This is <i>italics</i>."`	यह इटैलिक है.
अंडरलाइन करें	`"This is <u>underline</u>."`	यह अंडरलाइन है.
स्ट्राइकथ्रू	`"This is <s>strikethrough</s>."`	यह ~~स्ट्राइकथ्रू~~ है.
फ़ॉन्ट का रंग	`"This is <font color=\"#FF0000\">red font</font>."`	यह लाल फ़ॉन्ट है.
हाइपरलिंक	`"This is a <a href=\"https://www.google.com\">hyperlink</a>."`	यह एक हाइपरलिंक है.
समय	`"This is a time format: <time>2023-02-16 15:00</time>."`	यह समय का फ़ॉर्मैट है: 16-02-2023 15:00.
न्यूलाइन	`"This is the first line. <br> This is a new line.`"	यह पहली लाइन है. यह एक नई लाइन है.

विजेट