विजेट

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

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

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

Google Workspace ऐड-ऑन के डिज़ाइन की किट का इस्तेमाल करना

ऐड-ऑन और #39s विजेट डिज़ाइन करने में लगने वाला समय बचाने के लिए, डिज़ाइनर Figma पर उपलब्ध Google Workspace ऐड-ऑन यूज़र इंटरफ़ेस (यूआई) डिज़ाइन किट का इस्तेमाल कर सकते हैं. आप Figma खाता बना सकते हैं या अपने संगठन के एडमिन से लाइसेंस का अनुरोध कर सकते हैं.

कॉम्पोनेंट ब्राउज़ करें और विजेट बनाने और उन्हें विज़ुअलाइज़ करने के लिए, बिल्ट-इन टेंप्लेट का इस्तेमाल करें.

डिज़ाइन किट पाएं

विजेट के टाइप

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

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

स्ट्रक्चरल विजेट, एआई (AI) में इस्तेमाल होने वाले अन्य विजेट के लिए कंटेनर और संगठन की सुविधा देते हैं.

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

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

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

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

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

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

 

फ़िक्स्ड फ़ुटर विजेट का उदाहरण

एक नज़र डालें

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

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

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

लुक कार्ड के हेडर को पसंद के मुताबिक बनाने के लिए, मानक कार्ड बनाते समय .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);
      

 

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

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

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

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

  • इमेज—ऐसी इमेज जिसे होस्ट किए गए और सार्वजनिक तौर पर ऐक्सेस किए जाने वाले यूआरएल की मदद से दिखाया गया है.
  • सजाए गए टेक्स्ट—एक टेक्स्ट कॉन्टेंट स्ट्रिंग जिसे आप ऊपर और नीचे के टेक्स्ट लेबल और इमेज या आइकॉन जैसे दूसरे एलिमेंट के साथ जोड़ सकते हैं. डेकोरेटेड टेक्स्ट विजेट में बटन या स्विच विजेट भी शामिल हो सकता है. जोड़े गए स्विच, सामान्य टॉगल या चेकबॉक्स हो सकते हैं. ColoredText विजेट के कॉन्टेंट टेक्स्ट के लिए एचटीएमएल फ़ॉर्मैटिंग का इस्तेमाल किया जा सकता है; ऊपर और नीचे के लेबल पर प्लेन टेक्स्ट का इस्तेमाल होना चाहिए.
  • टेक्स्ट पैराग्राफ़—एक आसान टेक्स्ट पैराग्राफ़, जिसमें एचटीएमएल फ़ॉर्मैट एलिमेंट शामिल हो सकते हैं.




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

कार्ड ऐक्शन विजेट

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

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

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

DecedText चेकबॉक्स

एक 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 the 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 the 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 the date and time in EDT 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"));
      

 

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

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

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("A grid item")
  .setSubtitle("with a subtitle")
  .setImage(imageComponent);

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

var borderStyle = CardService.newBorderStyle()
  .setType(CardService.BorderType.STROKE)
  .setCornerRadius(8)
  .setStrokeColor("#00FF00FF");

var imageComponent = CardService.newImageComponent()
  .setImageUrl("https://cataas.com/cat?0.001")
  .setCropStyle(cropStyle)
  .setBorderStyle(borderStyle);

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

 

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

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

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

फ़ॉर्मैट करें उदाहरण रेंडर किया गया नतीजा
बोल्ड <b>test</b> जांच करना
इटैलिक <i>test</i> जांच करना
अंडरलाइन <u>test</u> जांच करना
स्ट्राइकथ्रू <s>test</s> जांच करना
फ़ॉन्ट का रंग <font color="#ea9999">test</font> जांच करना
हाइपरलिंक <a href="http://www.google.com">google</a> Google
समय <time>2020-02-16 15:00</time> 16-02-2020 15:00
नई लाइन test <br> test टेस्ट
टेस्ट