تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
تتيح لك تطبيقات المصغّرات Text Input (إدخال نص) قراءة النص الذي يقدّمه المستخدمون والتفاعل معه. يمكنك
ضبط هذه التطبيقات المصغّرة لتقديم اقتراحات تلقائية للمستخدمين عند إدخال النص.
يمكن أن تأتي الاقتراحات المقدَّمة من قائمة ثابتة من السلاسل التي تقدّمها.
بدلاً من ذلك، يمكنك إنشاء الاقتراحات من السياق، مثل النص الذي سبق للمستخدم كتابته في التطبيق المصغّر.
ضبط الاقتراحات
لضبط ميزة "الاقتراحات" في حقل إدخال نص، ما عليك سوى تنفيذ الخطوات التالية:
يمكنك إنشاء قائمة بالاقتراحات من خلال:
إنشاء قائمة ثابتة، و/أو
تحديد إجراء باستخدام
دالة ردّ اتصال تُنشئ هذه القائمة ديناميكيًا من السياق
إرفاق قائمة الاقتراحات و/أو الإجراء بأداة إدخال النص
إذا قدّمت قائمة ثابتة من الاقتراحات وإجراءً، يستخدم واجهة مستخدم التطبيق القائمة الثابتة إلى أن يبدأ المستخدم بإدخال أحرف،
عندها يتم استخدام دالة الاستدعاء ويتم تجاهل القائمة الثابتة.
الاقتراحات الثابتة
لتقديم قائمة ثابتة من الاقتراحات، ما عليك سوى اتّباع الخطوات التالية:
تعرِض واجهة المستخدم الاقتراحات الثابتة بالترتيب الذي تمت إضافتها به. يُجري واجهة المستخدم
أيضًا مطابقة تلقائية للبادئة غير الحسّاسة لحالة الأحرف، كما تصفّل
قائمة الاقتراحات عندما يكتب المستخدم أحرفًا في التطبيق المصغّر.
الإجراءات المقترَحة
إذا كنت لا تستخدِم قائمة اقتراحات ثابتة، عليك تحديد إجراء
لإنشاء اقتراحاتك بشكل ديناميكي. ويمكنك إجراء ذلك باتّباع الخطوات التالية:
نفِّذ دالة ردّ الاتصال لإنشاء قائمة الاقتراحات وإرجاع
كائن SuggestionsResponse
مُنشئ.
تستدعي واجهة المستخدم وظيفة طلب معاودة الاتصال كلما كتب المستخدم حرفًا في ملف
إدخال النص، ولكن بعد أن يتوقف المستخدم عن الكتابة لبعض الوقت فقط. تتلقّى دالة callbackعنصر حدث يحتوي على معلومات عن التطبيقات المصغّرة
للبطاقة المفتوحة. اطّلِع على عناصر أحداث الإجراءات للحصول على التفاصيل.
يجب أن تعرِض وظيفة ردّ الاتصال عنصرًا صالحًا
SuggestionsResponse
يحتوي على قائمة الاقتراحات المراد عرضها. تعرِض واجهة المستخدم
الاقتراحات بالترتيب الذي تمت إضافتها به. على عكس القوائم الثابتة، لا تُجري واجهة المستخدم
أي فلترة تلقائية لاقتراحات معاودة الاتصال استنادًا إلى إدخال العميل. إذا كنت تريد إجراء هذا الفلترة، يجب قراءة قيمة إدخال النص
من عنصر الحدث وفلترة اقتراحاتك أثناء إنشاء القائمة.
مثال
يوضّح المقتطف التالي من رمز إضافة Google Workspace كيفية ضبط الاقتراحات في عنصرَي واجهة مستخدم مختلفَين لإدخال النصوص، الأول باستخدام قائمة ثابتة والثاني باستخدام دالة طلب معاودة الاتصال:
//Createaninputwithastaticsuggestionlist.vartextInput1=CardService.newTextInput().setFieldName('colorInput').setTitle('Color choice').setSuggestions(CardService.newSuggestions().addSuggestion('Red').addSuggestion('Yellow').addSuggestions(['Blue','Black','Green']));//Createaninputwithadynamicsuggestionlist.varaction=CardService.newAction().setFunctionName('refreshSuggestions');vartextInput2=CardService.newTextInput().setFieldName('emailInput').setTitle('Email').setSuggestionsAction(action);//.../***Buildandreturnasuggestionresponse.Inthiscase,thesuggestions*arealistofemailstakenfromtheTo:andCC:listsoftheopen*messageinGmail,filteredbythetextthattheuserhasalready*entered.Thismethodassumesthe*add-onextendsGmail;theadd-ononlycallsthismethodforcards*displayedwhentheuserhasenteredamessagecontext.**@param{Object}etheeventobjectcontainingdataassociatedwith*thistextinputwidget.*@return{SuggestionsResponse}*/functionrefreshSuggestions(e){//ActivatetemporaryGmailscopes,inthiscasesothatthe//openmessagemetadatacanberead.varaccessToken=e.gmail.accessToken;GmailApp.setCurrentMessageAccessToken(accessToken);varuserInput=e && e.formInput['emailInput'].toLowerCase();varmessageId=e.gmail.messageId;varmessage=GmailApp.getMessageById(messageId);//Combinethecomma-separatedreturnedbythesemethods.varaddresses=message.getTo()+','+message.getCc();//Filtertheaddresslisttothosecontainingthetexttheuser//hasalreadyentered.varsuggestionList=[];addresses.split(',').forEach(function(email){if(email.toLowerCase().indexOf(userInput)!==-1){suggestionList.push(email);}});suggestionList.sort();returnCardService.newSuggestionsResponseBuilder().setSuggestions(CardService.newSuggestions().addSuggestions(suggestionList)).build();//Don't forget to build the response!}
الاقتراحات وOnChangeAction()
يمكن أن تتضمّن التطبيقات المصغّرة لإدخال النصوص دالة معالج محددة
setOnChangeAction()
يتم تنفيذها عندما يفقد التطبيق المصغّر التركيز.
إذا كان كلّ من معالِج الإدخال والاقتراحات مفعَّلاَن لإدخال النص نفسه، تحدِّد القواعد التالية سلوك التفاعل مع إدخال النص:
يتم تنفيذ معالِج setOnChangeAction() بعد اختيار اقتراح.
إذا ضغط المستخدم على مفتاح Enter (أو أزال التركيز من إدخال النص)
بدون تعديل الاقتراح المحدّد، لن يتم setOnChangeAction()
تفعيله مرة أخرى.
يتم تنشيط setOnChangeAction() مرة أخرى إذا عدّل المستخدم أحد الاقتراحات بعد اختياره لكي لا يتطابق مع أي من الاقتراحات في القائمة.
إذا لم يختار المستخدم اقتراحًا، يتم تنشيط setOnChangeAction()
عندما يفقد إدخال النص التركيز.
تاريخ التعديل الأخير: 2024-12-22 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2024-12-22 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\u003cp\u003eThe Text Input widget enables add-ons to process user-provided text and offer suggestions for input.\u003c/p\u003e\n"],["\u003cp\u003eSuggestions can be statically defined or dynamically generated using an action with a callback function.\u003c/p\u003e\n"],["\u003cp\u003eWhen both static and dynamic suggestions are provided, the static list is used initially, switching to the dynamic list as the user types.\u003c/p\u003e\n"],["\u003cp\u003eDynamic suggestions are built by a callback function triggered by user input and require a SuggestionsResponse object.\u003c/p\u003e\n"],["\u003cp\u003eCombining suggestions with onChangeAction() results in specific interaction behaviors depending on user actions and suggestion selection.\u003c/p\u003e\n"]]],["Text input widgets can be configured with suggestions, either static or dynamic. Static suggestions are created with a `Suggestions` object, populated with `addSuggestion()` or `addSuggestions()`, and attached to the widget using `setSuggestions()`. Dynamic suggestions utilize an `Action` object linked to a callback function via `setSuggestionsAction()`. This callback builds a `SuggestionsResponse` object, and filtering must be implemented manually. A text input can also use a `setOnChangeAction()`. If both the suggestion and `setOnChangeAction()` are enabled, the `setOnChangeAction()` will be executed after a suggestion is selected or if the user modifies the suggestion.\n"],null,["# Autocomplete suggestions for text inputs\n\nThe [Text Input](/apps-script/reference/card-service/text-input) widget\nlets your add-on read and react to text that users provide. You can\nconfigure these widgets to provide users automatic suggestions for\ninput text.\n\nThe suggestions provided can come from a static list of strings you provide.\nAlternatively, you can build the suggestions from context, such as the text\nthe user has already typed into the widget.\n\nConfiguring suggestions\n-----------------------\n\nConfiguring suggestions for a text input only requires that you do the\nfollowing:\n\n- Create a list of suggestions by:\n - Creating a static list, and/or\n - Defining an [action](/workspace/add-ons/concepts/actions) with a callback function that builds that list dynamically from context.\n- Attach the suggestions list and/or action to the text input widget.\n\nIf you provide both a static list of suggestions and an action, the\napplication UI uses the static list until the user starts entering characters,\nwhereupon the callback function is used and the static list is ignored.\n\n### Static suggestions\n\nTo offer a static list of suggestions, you only need to do the following:\n\n1. Create a [`Suggestions`](/apps-script/reference/card-service/suggestions) object.\n2. Add each static suggestion to it using [`addSuggestion()`](/apps-script/reference/card-service/suggestions#addSuggestion(String)) or [`addSuggestions()`](/apps-script/reference/card-service/suggestions#addsuggestionssuggestions).\n3. Attach the [`Suggestions`](/apps-script/reference/card-service/suggestions) object to the widget using [`TextInput.setSuggestions()`](/apps-script/reference/card-service/text-input#setsuggestionssuggestions).\n\nThe UI displays static suggestions in the order in which they were added. The UI\nalso automatically performs case-insensitive prefix matching and filters the\nsuggestion list as the user types characters into the widget.\n\n### Suggestion actions\n\nIf you aren't using a static suggestion list, you must define an action\nto build your suggestions dynamically. You can do this by following these steps:\n\n1. Create an [`Action`](/apps-script/reference/card-service/action) object and associate it with an [callback function](/workspace/add-ons/concepts/actions#callback_functions) you define.\n2. Call the widget's [`TextInput.setSuggestionsAction()`](/apps-script/reference/card-service/text-input#setsuggestionsactionsuggestionsaction) function, providing it the [`Action`](/apps-script/reference/card-service/action) object.\n3. Implement the callback function to build the suggestion list and return a built [`SuggestionsResponse`](/apps-script/reference/card-service/suggestions-response) object.\n\nThe UI calls the callback function whenever the user types a character into the\ntext input, but only after the user has stopped typing for a moment. The\ncallback function receives an *event object* containing information about the\nopen card's widgets. See\n[Action event objects](/workspace/add-ons/concepts/actions#action_event_objects)\nfor details.\n\nThe callback function must return a valid\n[`SuggestionsResponse`](/apps-script/reference/card-service/suggestions-response)\nobject containing the list of suggestions to display. The UI displays\nsuggestions in the order that they are added. Unlike static lists, the UI does\nnot conduct any automatic filtering of callback suggestions based on the user\ninput. If you want to have such filtering, you must read the text input value\nfrom the event object and filter your suggestions as you construct the list.\n\n### Example\n\nThe following Google Workspace add-on code snippet\nshows how to configure suggestions\non two different text input widgets, the first with a static list and the\nsecond using a callback function: \n\n // Create an input with a static suggestion list.\n var textInput1 = CardService.newTextInput()\n .setFieldName('colorInput')\n .setTitle('Color choice')\n .setSuggestions(CardService.newSuggestions()\n .addSuggestion('Red')\n .addSuggestion('Yellow')\n .addSuggestions(['Blue', 'Black', 'Green']));\n\n // Create an input with a dynamic suggestion list.\n var action = CardService.newAction()\n .setFunctionName('refreshSuggestions');\n var textInput2 = CardService.newTextInput()\n .setFieldName('emailInput')\n .setTitle('Email')\n .setSuggestionsAction(action);\n\n // ...\n\n /**\n * Build and return a suggestion response. In this case, the suggestions\n * are a list of emails taken from the To: and CC: lists of the open\n * message in Gmail, filtered by the text that the user has already\n * entered. This method assumes the Google Workspace\n * add-on extends Gmail; the add-on only calls this method for cards\n * displayed when the user has entered a message context.\n *\n * @param {Object} e the event object containing data associated with\n * this text input widget.\n * @return {SuggestionsResponse}\n */\n function refreshSuggestions(e) {\n // Activate temporary Gmail scopes, in this case so that the\n // open message metadata can be read.\n var accessToken = e.gmail.accessToken;\n GmailApp.setCurrentMessageAccessToken(accessToken);\n\n var userInput = e && e.formInput['emailInput'].toLowerCase();\n var messageId = e.gmail.messageId;\n var message = GmailApp.getMessageById(messageId);\n\n // Combine the comma-separated returned by these methods.\n var addresses = message.getTo() + ',' + message.getCc();\n\n // Filter the address list to those containing the text the user\n // has already entered.\n var suggestionList = [];\n addresses.split(',').forEach(function(email) {\n if (email.toLowerCase().indexOf(userInput) !== -1) {\n suggestionList.push(email);\n }\n });\n suggestionList.sort();\n\n return CardService.newSuggestionsResponseBuilder()\n .setSuggestions(CardService.newSuggestions()\n .addSuggestions(suggestionList))\n .build(); // Don't forget to build the response!\n }\n\nSuggestions and `OnChangeAction()`\n----------------------------------\n\nText input widgets can have a\n[`setOnChangeAction()`](/workspace/add-ons/concepts/actions#setOnChangeAction)\nhandler function defined that executes whenever the widget loses focus.\nIf this handler and suggestions are both enabled for the same text input, the\nfollowing rules define the text input interaction behavior:\n\n1. The `setOnChangeAction()` handler executes after a suggestion is selected.\n2. If the user presses Enter (or otherwise makes the text input lose focus) without modifying the selected suggestion, `setOnChangeAction()` doesn't trigger again.\n3. `setOnChangeAction()` does trigger again if the user, after selecting a suggestion, edits it so that it no longer matches any of the suggestions in the list.\n4. If the user doesn't select a suggestion, `setOnChangeAction()` triggers when the text input loses focus."]]