الأدوات

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

الأداة هي عنصر بسيط لواجهة المستخدم توفر واحدًا أو أكثر من العناصر التالية:

  • بنية الأدوات الأخرى، مثل البطاقات والأقسام،
  • معلومات للمستخدم مثل النصوص والصور، أو
  • عبارات الإجراءات مثل الأزرار وحقول إدخال النص أو مربعات الاختيار.

تحدد مجموعات الأدوات التي تتم إضافتها إلى أقسام البطاقات واجهة المستخدم العامة للإضافة. تتسم الأدوات بالمظهر والوظيفة نفسهما على الويب وأجهزة الجوّال. توضّح المستندات المرجعية عدة طرق لإنشاء مجموعات الأدوات.

استخدام مجموعة تصميمات "إضافات Google Workspace"

لتوفير الوقت المستغرق في تصميم أدوات إحدى الإضافات، يمكن للمصممين استخدام مجموعة أدوات واجهة مستخدم إضافات Google Workspace المتاحة على Figma. يمكنك إنشاء حساب Figma أو طلب ترخيص من مشرف المؤسسة.

تصفح المكونات واستخدم النماذج المضمنة لإنشاء الأدوات وعرضها بشكل مرئي.

الحصول على مجموعة التصميم

أنواع الأدوات

يتم تصنيف أدوات الإضافات بشكل عام إلى ثلاث مجموعات: الأدوات الهيكلية والأدوات المعلوماتية وأدوات تفاعل المستخدمين.

الأدوات البنيوية

وتوفّر الأدوات البنيوية حاويات وتنظيمًا للأدوات الأخرى المستخدمة في الذكاء الاصطناعي.

الأدوات البنيوية

  • مجموعة الأزرار - مجموعة من زر واحد أو أكثر من أزرار النصوص أو الصور، مجمّعة معًا في صف أفقي.
  • Card — بطاقة سياق واحدة تحتوي على قسم واحد أو أكثر من أقسام البطاقة. يمكنك تحديد كيفية تنقل المستخدمين بين البطاقات من خلال تهيئة التنقل في البطاقات.
  • عنوان البطاقة — عنوان بطاقة معينة. يمكن أن تتضمن عناوين البطاقة عناوين وترجمات وصورة. تظهر إجراءات البطاقة والإجراءات العامة في عنوان البطاقة إذا كانت الإضافة تستخدمها.
  • قسم البطاقة: مجموعة من الأدوات المجمَّعة، مقسّمة من أقسام البطاقة الأخرى حسب قاعدة أفقية ويكون لها رأس قسم اختياريًا. يجب أن تتضمن كل بطاقة قسمًا واحدًا على الأقل من البطاقات. لا يمكنك إضافة بطاقات أو عناوين بطاقات إلى قسم بطاقة.

بالإضافة إلى هذه الأدوات الأساسية، يمكنك استخدام خدمة البطاقات في إحدى "إضافات 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، يمكنك إما عرض المحتوى الجديد على الفور (السلوك الافتراضي) أو عرض إشعار بطاقة خاطفة أسفل الشريط الجانبي. إذا نقر المستخدم على "رجوع" للرجوع إلى الصفحة الرئيسية أثناء تشغيل مشغّل سياقي، ستظهر بطاقة خاطفة لمساعدة المستخدمين في العثور على المحتوى السياقي مرة أخرى.

لعرض بطاقة سريعة عند توفر محتوى سياقي جديد، بدلاً من عرض المحتوى السياقي الجديد على الفور، أضِف .setDisplayStyle(CardService.DisplayStyle.PEEK) إلى صفك الدراسي CardBuilder. لا تظهر بطاقة خاطفة إلا إذا تم عرض كائن بطاقة واحد مع المشغِل السياقي، وبخلاف ذلك، تحل البطاقات المعروضة محل البطاقة الحالية على الفور.

لتخصيص عنوان البطاقة السريعة، أضف طريقة .setPeekCardHeader() مع كائن CardHeader عادي عند إنشاء بطاقة سياقية. بشكل افتراضي، يحتوي عنوان بطاقة خاطفة على اسم الإضافة فقط.

تُعلم الرمز التالي، استنادًا إلى البدء السريع لإضافة القطط في 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);

 

 مثال على بطاقة خاطفة مخصصة

أدوات معلوماتية

أدوات معلوماتية

تقدم الأدوات الإعلامية معلومات للمستخدم.

  • صورة — صورة تتم الإشارة إليها من خلال عنوان URL تستضيفه ويمكن الوصول إليه بشكل علني.
  • DecoratedText: سلسلة محتوى نصي يمكنك إقرانها بعناصر أخرى، مثل تصنيفات النصوص في الجزء العلوي والسفلي وصورة أو رمز. يمكن أن تتضمن أدوات الزخرفة التي تتضمن نصوصًا أيضًا أداة الزر أو التبديل. يمكن أن تكون مفاتيح التحويل المضافة مفاتيح تبديل بسيطة أو مربعات اختيار. يمكن لنص المحتوى في أداة DeoratedText استخدام تنسيق HTML؛ ويجب أن تستخدم التصنيفات العلوية والسفلية النص العادي.
  • Text paragraph—فقرة نصية بسيطة يمكن أن تتضمن عناصر HTML بتنسيق.




أدوات تفاعل المستخدمين

أداة إجراء البطاقة

تسمح أدوات تفاعل المستخدم للإضافة بالرد على الإجراءات التي يتخذها المستخدمون. يمكنك تهيئة هذه الأدوات باستخدام استجابات الإجراءات لعرض بطاقات مختلفة أو فتح عناوين URL أو عرض إشعارات أو إنشاء مسودات رسائل إلكترونية أو تشغيل وظائف برمجة تطبيقات أخرى. راجع دليل إنشاء البطاقات التفاعلية للحصول على التفاصيل.

أدوات تفاعل المستخدمين

  • إجراء البطاقة: عنصر قائمة يتم وضعه في قائمة شريط عناوين الإضافات. يمكن أن تحتوي قائمة شريط العناوين أيضًا على عناصر يتم تحديدها على أنها إجراءات عامة، وتظهر على كل بطاقة تعرِفها الإضافة.
  • منتقي التاريخ والوقت - أدوات تسمح للمستخدمين بتحديد تاريخ أو وقت أو كليهما. اطّلِع على منتقي التاريخ والوقت أدناه لمزيد من المعلومات.
  • زر الصورة - زر يستخدم صورة بدلاً من نص. يمكنك استخدام أحد الرموز المحددة مسبقًا أو صورة مستضافة بشكل عام والتي تمت الإشارة إليها في عنوان URL.
  • إدخال التحديد — حقل إدخال يمثل مجموعة من الخيارات. تتوفر أدوات إدخال التحديد كمربعات اختيار أو أزرار اختيار أو مربعات اختيار منسدلة.
  • Switch — أداة تبديل. لا يمكنك استخدام مفاتيح التحويل إلا مع أداة DecoizedText. ويتم عرض هذه الأجهزة تلقائيًا كمفتاح تحويل، ولكن يمكنك عرضها كـ مربع اختيار بدلاً من ذلك.
  • زر النص: زر يحمل تصنيفًا نصيًا. يمكنك تحديد تعبئة لون الخلفية لأزرار النص (الافتراضي هو الشفافية). يمكنك أيضًا تعطيل الزر حسب الحاجة.
  • إدخال النص — حقل إدخال النص. يمكن أن تحتوي الأداة على نص عنوان ونص تلميح ونص متعدد الأسطر. ويمكن أن تؤدي الأداة إلى تشغيل الإجراءات عند تغيير قيمة النص.
  • الشبكة — مخطط متعدد الأعمدة يمثل مجموعة من العناصر. يمكنك تمثيل العناصر من خلال صورة وعنوان وعنوان فرعي ومجموعة من خيارات التخصيص مثل أنماط الحدود والاقتصاص.

مربعات اختيار TextdecorationedText

يمكنك تحديد أداة 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"));

 

 مثال على بطاقة خاطفة مخصصة

في ما يلي مثال لدالة معالج أداة اختيار التاريخ والوقت. يعالج هذا المعالج سلسلة ويسجّلها ببساطة تمثّل وقت التاريخ الذي اختاره المستخدم في أداة منتقي الوقت والتاريخ ذات المعرّف "myDateTimePickerWidgetID":

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 بسيط للنص. عند تعيين المحتوى النصي لهذه الأدوات، فقط قم بتضمين علامات HTML المقابلة. التنسيقات التالية معتمدة:

الشكل مثال النتيجة المعروضة
غامق <b>test</b> test
مائل <i>test</i> test
تسطير <u>test</u> test
يتوسطه خط <s>test</s> test
لون الخط <font color="#ea9999">test</font> test
رابط تشعّبي <a href="http://www.google.com">google</a> google
الوقت <time>2020-02-16 15:00</time> 16-02-2020 15:00
سطر جديد test <br> test اختبار
اختبار