विजेट

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

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

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

विजेट के टाइप

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

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

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

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

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

इन बुनियादी संरचनात्मक विजेट के अतिरिक्त, 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 संदेश दिखाई देता है, तो आप या तो नई प्रासंगिक सामग्री तुरंत (डिफ़ॉल्ट व्यवहार) या पीक कार्ड सूचना नीचे दिखाएं साइडबार. अगर कोई उपयोगकर्ता वापस जाएं पर क्लिक करता है आपके होम पेज पर वापस लौटना होगा, जबकि काम के हिसाब से ट्रिगर चालू है. एक पीक कार्ड दिखता है, जिसकी मदद से उपयोगकर्ता प्रासंगिक नहीं बनाया जा सकता.

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

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

पसंद के मुताबिक बनाए गए पीक कार्ड का उदाहरण

इसके आधार पर, नीचे दिया गया कोड Cats Google Workspace ऐड-ऑन क्विकस्टार्ट, लोगों को पीक कार्ड से, कॉन्टेक्स्ट के हिसाब से नए कॉन्टेंट के बारे में सूचना देता है. साथ ही, उनकी पसंद के मुताबिक चुना गया 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—A टेक्स्ट कॉन्टेंट स्ट्रिंग, जिसे टॉप और बॉटम जैसे दूसरे एलिमेंट के साथ जोड़ा जा सकता है टेक्स्ट लेबल, और कोई इमेज या आइकॉन शामिल करें. डेकोरेट किए गए टेक्स्ट के विजेट में, बटन या विजेट स्विच करें. जोड़े गए स्विच टॉगल या चेकबॉक्स हो सकते हैं. कॉन्टेंट का टेक्स्ट डेकोरेट किए गए टेक्स्ट विजेट का इस्तेमाल कर सकते हैं एचटीएमएल फ़ॉर्मैटिंग; सबसे ऊपर और बॉटम लेबल में सामान्य टेक्स्ट का इस्तेमाल होना चाहिए.
  • टेक्स्ट पैराग्राफ़—A टेक्स्ट पैराग्राफ़, जिसमें ये चीज़ें शामिल हो सकती हैं एचटीएमएल फ़ॉर्मैट एलिमेंट.

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

उपयोगकर्ता इंटरैक्शन विजेट

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

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

DecoratedText चेकबॉक्स

आपके पास DecoratedText को तय करने का विकल्प है वह विजेट जिसमें बटन या बाइनरी टॉगल के बजाय, चेकबॉक्स अटैच है स्विच. स्विच की तरह ही, चेकबॉक्स का मान ऐक्शन इवेंट ऑब्जेक्ट जिसे Action को भेजा जाता है इस DecoratedText के साथ अटैच किया गया के अनुसार setOnClickAction(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"));

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

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/workspace/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 मिनट के हिसाब से अलग-अलग करके दिखाया जाएगा, जिसे उपयोगकर्ता चुन सकता है से. उपयोगकर्ता किसी खास समय में भी टाइप कर सकता है. मोबाइल डिवाइस पर, समय चुनने वाला टूल, पहले से मौजूद मोबाइल "घड़ी" को खोलता है समय चुनने वाला विजेट.

डेस्कटॉप मोबाइल
तारीख चुनने वाले टूल का इस्तेमाल करने का उदाहरण मोबाइल पर तारीख चुनने वाले टूल को चुनने का उदाहरण
टाइम पिकर चुनने का उदाहरण मोबाइल टाइम पिकर को चुनने का उदाहरण

ग्रिड

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

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

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

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"));

टेक्स्ट का फ़ॉर्मैट

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

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

फ़ॉर्मैट उदाहरण रेंडर किया गया नतीजा
बोल्ड "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>." यह समय का फ़ॉर्मैट है: .
न्यूलाइन "This is the first line. <br> This is a new line." यह पहली लाइन है.
यह एक नई लाइन है.