التكامل

تضمين لوحات التحكم في HTML

يمكنك بسهولة تضمين لوحة تحكم في موقعك الإلكتروني، أو حتى في صفحات HTML المحلية. ويتم ذلك باستخدام عنصر iframe القياسي في HTML. يجب أن تكون لوحة التحكم مشاركة، إما في السحابة أو محلياً (On-premise) لتُحمَّل بنجاح. يُرجى ملاحظة أن لوحات التحكم المحلية لن تُحمَّل إلا عندما يكون العميل المستخدم لها داخل نفس شبكة الشركة. لتكامل أكثر تقدماً، يمكنك أيضاً استخدام REST APIs الخاصة بنا.

التعليمات:

1) استخراج رابط تضمين لوحة التحكم - في صفحة لوحات التحكم، تأكد من أن لوحة التحكم الخاصة بك مشاركة، ثم انقر على أيقونة الخاصة بهذه اللوحة. ستُعلمك لافتة منبثقة خضراء بأن الرابط قد نُسخ إلى الحافظة. ستستخدمه لاستبدال محتوى src في عنصر iframe في HTML أدناه.

2) تضمين لوحة التحكم بحجم ثابت

<html>

  <head>

    <title>Sprucely.io Dashboard</title>

  </head>

  <body>

    <h1>Sprucely.io Dashboard</h1>

    <iframe src="https://www.sprucely.io/service/dashboards/embed/[userId]/[dashboardId]/"

            allow="clipboard-write"

            style="height: 500px; width: 700px;"

            title="Sprucely.io Dashboard"></iframe>

  </body>

</html>

(أو) تضمين لوحة التحكم بعرض ديناميكي - يضبط حجم لوحة التحكم تلقائياً استناداً إلى عرض المستند الأصلي

يمكنك استخدام معامل النمط aspect-ratio لإعادة حساب الارتفاع تلقائياً استناداً إلى العرض.

<html>

  <head>

    <title>Sprucely.io Dashboard</title>

  </head>

  <body>

    <h1>Sprucely.io Dashboard</h1>

    <iframe src="https://www.sprucely.io/service/dashboards/embed/[userId]/[dashboardId]/"

            allow="clipboard-write"

            scrolling="no"

            style="width: 100%; aspect-ratio: 1.5; border: none;"

            title="Sprucely.io Dashboard"></iframe>

  </body>

</html>

3) خيارات تضمين أخرى مفيدة

يمكنك إضافة تعديلات نمط مخصصة إلى كتلة style لعنصر iframe، لتخصيص شكل الإطار ومظهره. تتبع هذه المعاملات إرشادات HTML CSS القياسية. يضيف المثال أدناه حداً رمادياً حول لوحة التحكم:

<html>

  <head>

    <title>Sprucely.io Dashboard</title>

  </head>

  <body>

    <h1>Sprucely.io Dashboard</h1>

    <iframe src="https://www.sprucely.io/service/dashboards/embed/[userId]/[dashboardId]/"

            allow="clipboard-write"

            style="height: 100%; width: 100%; border: 2px solid grey;"

            title="Sprucely.io Dashboard"></iframe>

  </body>

</html>