تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
مستوى الترميز: متوسط المدة: 15 دقيقة نوع المشروع: إضافة للمحرّر
الأهداف
فهم ما يفعله الحلّ
فهم وظائف خدمات "برمجة تطبيقات Google" ضمن الحل
إعداد النص البرمجي
شغِّل النص البرمجي.
لمحة عن هذا الحل
استخدِم هذا الحل لإضافة شريط تقدّم إلى أسفل الشرائح في عرضك التقديمي.
آلية العمل
يحسب النص البرمجي عدد الشرائح في العرض التقديمي ويضيف شكلاً مستطيلاً إلى أسفل كل شريحة. يزيد النص البرمجي عرض كل شكل مستطيل لعرض مستوى التقدّم داخل الشرائح.
لاستخدام هذا النموذج، يجب استيفاء المتطلبات الأساسية التالية:
حساب Google (قد تتطلّب حسابات Google Workspace موافقة المشرف).
متصفّح ويب يمكنه الوصول إلى الإنترنت
إعداد النص البرمجي
انقر على الزر التالي لإنشاء نسخة من عرض شرائح شريط التقدم. مشروع "برمجة تطبيقات Google" الخاص بهذا الحل مرفق بالعرض التقديمي. إنشاء نسخة
في العرض التقديمي، انقر على الإضافات>شريط التقدم>عرض شريط التقدم.
امنح الإذن للنصّ البرمجي عند مطالبتك بذلك. إذا عرضت شاشة الموافقة على OAuth التحذير لم يتم التحقّق من هذا التطبيق، يمكنك المتابعة من خلال النقر على خيارات متقدمة>الانتقال إلى {اسم المشروع} (غير آمن).
انقر مرة أخرى على الإضافات>شريط التقدم>عرض شريط التقدم.
لإزالة شريط التقدّم، انقر على الإضافات>شريط التقدّم>إخفاء شريط التقدّم.
مراجعة الرمز البرمجي
لمراجعة رمز Apps Script الخاص بهذا الحلّ، انقر على عرض رمز المصدر أدناه:
/** * @OnlyCurrentDoc Adds progress bars to a presentation. */constBAR_ID='PROGRESS_BAR_ID';constBAR_HEIGHT=10;// px/** * Runs when the add-on is installed. * @param {object} e The event parameter for a simple onInstall trigger. To * determine which authorization mode (ScriptApp.AuthMode) the trigger is * running in, inspect e.authMode. (In practice, onInstall triggers always * run in AuthMode.FULL, but onOpen triggers may be AuthMode.LIMITED or * AuthMode.NONE.) */functiononInstall(e){onOpen();}/** * Trigger for opening a presentation. * @param {object} e The onOpen event. */functiononOpen(e){SlidesApp.getUi().createAddonMenu().addItem('Show progress bar','createBars').addItem('Hide progress bar','deleteBars').addToUi();}/** * Create a rectangle on every slide with different bar widths. */functioncreateBars(){deleteBars();// Delete any existing progress barsconstpresentation=SlidesApp.getActivePresentation();constslides=presentation.getSlides();for(leti=0;i < slides.length;++i){constratioComplete=(i/(slides.length-1));constx=0;consty=presentation.getPageHeight()-BAR_HEIGHT;constbarWidth=presentation.getPageWidth()*ratioComplete;if(barWidth > 0){constbar=slides[i].insertShape(SlidesApp.ShapeType.RECTANGLE,x,y,barWidth,BAR_HEIGHT);bar.getBorder().setTransparent();bar.setLinkUrl(BAR_ID);}}}/** * Deletes all progress bar rectangles. */functiondeleteBars(){constpresentation=SlidesApp.getActivePresentation();constslides=presentation.getSlides();for(leti=0;i < slides.length;++i){constelements=slides[i].getPageElements();for(constelofelements){if(el.getPageElementType()===SlidesApp.PageElementType.SHAPE&& el.asShape().getLink()&& el.asShape().getLink().getUrl()===BAR_ID){el.remove();}}}}
المساهمون
تحتفظ Google بهذا النموذج بمساعدة خبراء Google المطوّرين.
تاريخ التعديل الأخير: 2025-07-25 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","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"]],["تاريخ التعديل الأخير: 2025-07-25 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\u003cp\u003eThis Google Apps Script solution adds a progress bar to the bottom of Google Slides presentations to visually track progress through the slides.\u003c/p\u003e\n"],["\u003cp\u003eThe script uses the Slides service to calculate the number of slides, add a rectangle shape to each slide, and dynamically adjust the rectangle's width to represent progress.\u003c/p\u003e\n"],["\u003cp\u003eUsers can easily install the script by making a copy of the provided presentation and authorizing the script to access their Google Slides.\u003c/p\u003e\n"],["\u003cp\u003eThe progress bar can be shown or hidden using the "Progress bar" menu found under "Extensions" in Google Slides after installation.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can review and modify the source code, which is publicly available on GitHub, for customization or further development.\u003c/p\u003e\n"]]],["This solution adds a progress bar to Google Slides presentations using Apps Script. The script calculates the total slides and adds a rectangle to the bottom of each slide, increasing the rectangle's width to visually represent progress. Users copy a sample presentation, authorize the script, and then run it to create or remove the progress bars via the \"Extensions\" menu. It utilizes the Slides service to manipulate slides and shapes, adding and deleting these elements.\n"],null,["**Coding level** : Intermediate \n\n**Duration** : 15 minutes \n\n**Project type**: Editor add-on\n\nObjectives\n\n- Understand what the solution does.\n- Understand what the Apps Script services do within the solution.\n- Set up the script.\n- Run the script.\n\nAbout this solution\n\nUse this solution to add a progress bar to the bottom of the slides in\nyour presentation.\n\nHow it works\n\nThe script calculates how many slides are in the presentation and adds a\nrectangle shape to the bottom of each slide. The script increases the width for\neach rectangle shape to show progress within the slides.\n\nApps Script services\n\nThis solution uses the following service:\n\n- [Slides service](https://developers.google.com/apps-script/reference/slides)--Gets a presentation's slides and adds a rectangle shape to each one.\n\nPrerequisites\n\nTo use this sample, you need the following prerequisites:\n\n- A Google Account (Google Workspace accounts might require administrator approval).\n- A web browser with access to the internet.\n\nSet up the script\n\n1. Click the following button to make a copy of the **Progress bar** Slides presentation. The Apps Script project for this solution is attached to the presentation. \n [Make a copy](https://docs.google.com/presentation/d/1wMwCeISpBgSal0K1K8qXPdr-MYZxkU_A-RobUIYZ8WU/copy)\n2. In the presentation, click **Extensions** \\\u003e **Progress bar** \\\u003e **Show progress bar**.\n3. When prompted, authorize the script.\n If the OAuth consent screen displays the warning, **This app isn't verified** ,\n continue by selecting **Advanced** \\\u003e\n **Go to {Project Name} (unsafe)**.\n\n4. Again, click **Extensions** \\\u003e\n **Progress bar** \\\u003e **Show progress bar**.\n\n5. To remove the progress bar, click **Extensions**\n \\\u003e\n **Progress bar** \\\u003e **Hide progress bar**.\n\nReview the code\n\nTo review the Apps Script code for this solution, click\n**View source code** below: \n\nView source code\n\n\u003cbr /\u003e\n\nslides/progress/progress.gs \n[View on GitHub](https://github.com/googleworkspace/apps-script-samples/blob/main/slides/progress/progress.gs) \n\n```gosu\n/**\n * @OnlyCurrentDoc Adds progress bars to a presentation.\n */\nconst BAR_ID = 'PROGRESS_BAR_ID';\nconst BAR_HEIGHT = 10; // px\n\n/**\n * Runs when the add-on is installed.\n * @param {object} e The event parameter for a simple onInstall trigger. To\n * determine which authorization mode (ScriptApp.AuthMode) the trigger is\n * running in, inspect e.authMode. (In practice, onInstall triggers always\n * run in AuthMode.FULL, but onOpen triggers may be AuthMode.LIMITED or\n * AuthMode.NONE.)\n */\nfunction onInstall(e) {\n onOpen();\n}\n\n/**\n * Trigger for opening a presentation.\n * @param {object} e The onOpen event.\n */\nfunction onOpen(e) {\n SlidesApp.getUi().createAddonMenu()\n .addItem('Show progress bar', 'createBars')\n .addItem('Hide progress bar', 'deleteBars')\n .addToUi();\n}\n\n/**\n * Create a rectangle on every slide with different bar widths.\n */\nfunction createBars() {\n deleteBars(); // Delete any existing progress bars\n const presentation = SlidesApp.getActivePresentation();\n const slides = presentation.getSlides();\n for (let i = 0; i \u003c slides.length; ++i) {\n const ratioComplete = (i / (slides.length - 1));\n const x = 0;\n const y = presentation.getPageHeight() - BAR_HEIGHT;\n const barWidth = presentation.getPageWidth() * ratioComplete;\n if (barWidth \u003e 0) {\n const bar = slides[i].insertShape(SlidesApp.ShapeType.RECTANGLE, x, y,\n barWidth, BAR_HEIGHT);\n bar.getBorder().setTransparent();\n bar.setLinkUrl(BAR_ID);\n }\n }\n}\n\n/**\n * Deletes all progress bar rectangles.\n */\nfunction deleteBars() {\n const presentation = SlidesApp.getActivePresentation();\n const slides = presentation.getSlides();\n for (let i = 0; i \u003c slides.length; ++i) {\n const elements = slides[i].getPageElements();\n for (const el of elements) {\n if (el.getPageElementType() === SlidesApp.PageElementType.SHAPE &&\n el.asShape().getLink() &&\n el.asShape().getLink().getUrl() === BAR_ID) {\n el.remove();\n }\n }\n }\n}\n```\n\n\n\u003cbr /\u003e\n\nContributors\n\nThis sample is maintained by Google with the help of Google Developer Experts.\n\nNext steps\n\n- [Extending Google Slides with Apps Script](/apps-script/guides/slides)\n- [Slides service reference](/apps-script/reference/slides)"]]