> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Space Portal Design

> Learn how to design and manage space portals, including how to create and edit portals and which features are supported across editions.

> In gray release

After creating a workspace, follow the steps in this document to design the space portal home page.

## 1. Space Portal Design

| **Feature**                         | **Free plan** | **Basic edition** | **Professional edition** | **Dedicated edition** | **Dedicated - OA Enhancement Pack** |
| ----------------------------------- | ------------- | ----------------- | ------------------------ | --------------------- | ----------------------------------- |
| **Multiple portals**                | Not supported | Not supported     | Not supported            | Not supported         | Supported                           |
| **Mobile navigation customization** | Not supported | Not supported     | Not supported            | Not supported         | Supported                           |

### 1.1 Overview

Space portal design lets you tailor the space portal to your business needs. A single space can host multiple portals—such as an office portal, a corporate information portal, or a Party building portal—to serve different scenarios. Space navigation supports custom configuration, and each portal theme can either inherit the space theme or use its own.

## 2. Steps

### 2.1 Create a Portal

<Steps>
  <Step title="Step 1">
    Sign in to the [YiDA workbench](https://www.yidaapps.com/workPlatform) as an app admin.
  </Step>

  <Step title="Step 2">
    Click **platform management** in the upper-right corner to open the platform management page.
  </Step>

  <Step title="Step 3">
    In the left navigation menu, choose **Platform-exclusive customization** > **Space management**, select the space you want to edit, and click **Edit**.
  </Step>

  <Step title="Step 4">
    Click **Space portal settings** > **Create portal**.
  </Step>
</Steps>

#### Create a Portal from a Template

* On the Create portal page, choose **Create from template** or **Create blank page**.

* Select a template portal and design the space portal layout on the page.

<Note>
  Workspace portal components are essentially the same as broadcastable portal components. For details, see [Portal components](/yida/portal/qqtor4i974oshuet).
</Note>

* When you are done, click **Save** in the upper-right corner.

#### Create a Blank Portal

* Click **Create blank page** to go directly to the new blank portal editing page, as shown below:

### 2.2 Edit a Portal

1. Open the space editor, choose **Space portal settings**, select a space portal, and click **Edit**.

### 2.3 Portal Management

1. The Space portal settings page manages multiple portals. The list displays: Portal, View scope, Last modified time and user with action, Portal status, and Actions.
2. Click a portal name to open its view page.
3. Click **Edit** to open the portal editing page.
4. Click **Copy** to duplicate a portal.
5. Click **Delete** to remove a portal after a secondary confirmation.
6. Click **Permission settings** to open the permission settings page.

## 3. Portal Component Reference

<Note>
  Workspace portal components are essentially the same as broadcastable portal components. For details, see [Portal components](/yida/portal/qqtor4i974oshuet). The differences are described below.
</Note>

| **Feature / Edition**      | **Free plan** | **Basic edition** | **Professional edition** | **Dedicated edition** | **Dedicated - OA Enhancement Pack** |
| -------------------------- | ------------- | ----------------- | ------------------------ | --------------------- | ----------------------------------- |
| **Tabs**                   | Not supported | Not supported     | Not supported            | Not supported         | Supported                           |
| **DingTalk announcements** | Not supported | Not supported     | Not supported            | Not supported         | Supported                           |
| **DingTalk apps**          | Not supported | Not supported     | Not supported            | Not supported         | Supported                           |
| **DingTalk To-Do**         | Not supported | Not supported     | Not supported            | Not supported         | Supported                           |
| **DingTalk Docs**          | Not supported | Not supported     | Not supported            | Not supported         | Supported                           |
| **DingTalk Project**       | Not supported | Not supported     | Not supported            | Not supported         | Supported                           |

### 3.1 Space Portals Support the Tabs Component

The space portal supports the Tabs component, so users can switch quickly between modules.

Drag the component onto the page and configure its basic properties.

<table>
  <tr>
    <td>**Preview**</td>
    <td>**Property**</td>
    <td>**Description**</td>
  </tr>

  <tr>
    <td rowSpan={12} />

    <td>Size</td>
    <td>Small or Medium. Default: Medium.</td>
  </tr>

  <tr>
    <td>Overflow behavior</td>
    <td>Two display modes: scroll or dropdown.</td>
  </tr>

  <tr>
    <td>Content</td>
    <td>Tab items. Up to 20 tabs.</td>
  </tr>

  <tr>
    <td>Padding</td>
    <td>Configurable.</td>
  </tr>

  <tr>
    <td>Border</td>
    <td>Configurable.</td>
  </tr>

  <tr>
    <td>Shadow</td>
    <td>Configurable.</td>
  </tr>

  <tr>
    <td rowSpan={6}>Display device</td>
    <td rowSpan={6}>Choose both platforms or PC only.</td>
  </tr>

  <tr />

  <tr />

  <tr />

  <tr />

  <tr />
</table>

### 3.2 Space Portals Support the DingTalk Docs Component

By integrating DingTalk Docs into a YiDA space portal, your organization can centralize document management. All project- and process-related documents are managed and accessed on one platform, reducing the overhead of switching between platforms.

#### 1) Install the Space Portal X DingTalk Docs Component

1. Go to the YiDA Plugin Center.
2. Select the **Space portal x DingTalk Docs** plugin.

<Steps>
  <Step title="Click Install plugin on the right" />

  <Step title="After installation, manage the plugin on DingTalk workbench > platform management page">
    <Note>
      For details, see Plugin management.
    </Note>
  </Step>
</Steps>

#### 2) Use the Space Portal X DingTalk Docs Component

<table>
  <tr>
    <td>**Preview**</td>
    <td>**Property**</td>
    <td>**Description**</td>
  </tr>

  <tr>
    <td rowSpan={11} />

    <td>Show title</td>
    <td>Defines the separator between breadcrumbs. Default: "/".</td>
  </tr>

  <tr>
    <td>Title text</td>
    <td>Up to 100 characters.</td>
  </tr>

  <tr>
    <td>Help tip</td>
    <td>Help text that appears next to the ❓ icon when set.</td>
  </tr>

  <tr>
    <td>View more</td>
    <td>Displays a More button that opens the specified URL when clicked.</td>
  </tr>

  <tr>
    <td>Add document</td>
    <td>Click to open the DingTalk Docs list and select a document.</td>
  </tr>

  <tr>
    <td rowSpan={6}>Display device</td>
    <td rowSpan={6}>Display device: both platforms or PC only.</td>
  </tr>

  <tr />

  <tr />

  <tr />

  <tr />

  <tr />
</table>

### 3.3 Space Portals Support the DingTalk Project Component

By integrating DingTalk Project into a YiDA space portal, project data—such as task status, milestones, and issue records—syncs to the YiDA portal in real time, keeping project teams up to date.

<table>
  <tr>
    <td>**Preview**</td>
    <td>**Property**</td>
    <td>**Description**</td>
  </tr>

  <tr>
    <td rowSpan={10} />

    <td>Unique ID</td>
    <td>Auto-generated by the system.</td>
  </tr>

  <tr>
    <td>Show title</td>
    <td>Default: **DingTalk Project**.</td>
  </tr>

  <tr>
    <td>Help tip</td>
    <td>Help text that appears next to the ❓ icon when set.</td>
  </tr>

  <tr>
    <td>View more</td>
    <td>Displays a More button that opens the specified URL when clicked.</td>
  </tr>

  <tr>
    <td rowSpan={6}>Display device</td>
    <td rowSpan={6}>Display device: both platforms or PC only.</td>
  </tr>

  <tr />

  <tr />

  <tr />

  <tr />

  <tr />
</table>

### 3.4 Space Portals Support DingTalk Announcement Integration

The dynamic data source of the workspace portal announcement component supports DingTalk announcements. On the YiDA space **portal design** page, select the **Announcement** component. In the **Attribute** panel on the right, set **Data source** to dynamic data source and set **Content source** to **DingTalk announcements**.

<table>
  <tr>
    <td>**Announcement preview**</td>
    <td colSpan={2}>**Configuration steps**</td>
  </tr>

  <tr>
    <td />

    <td colSpan={2}>1. On the property panel, choose Announcement content > Dynamic data.<br />2. Set Content source to DingTalk announcements.<br />3. Multi-select announcement categories. Only categories you have permission to view are available.</td>
  </tr>
</table>

### 3.5 Space Portals Support DingTalk App Integration

Workspaces let you add DingTalk apps—both internal apps and third-party enterprise apps—that have been published to the DingTalk workbench. You can select DingTalk apps in the static data source of components such as the carousel, article list, announcement, and quick entry.

**The following sections cover each component:**

#### 1) Carousel Component

For other basic properties, see [this document](/yida/portal/xbn4iv7pclumwhep).

<table>
  <tr>
    <td>**Carousel preview**</td>
    <td colSpan={2}>**Configuration steps**</td>
  </tr>

  <tr>
    <td />

    <td colSpan={2}>1. On the property panel, choose Carousel content > Static data > Edit.<br />2. For Link type, choose Select app.<br />3. Click Select app.<br />4. The app dialog shows YiDA apps and DingTalk apps you have permission to access.</td>
  </tr>
</table>

#### 2) Article List

For other basic properties, see [this document](/yida/portal/bd77lg07oxxuuhcg).

<table>
  <tr>
    <td>**Article list preview**</td>
    <td colSpan={2}>**Configuration steps**</td>
  </tr>

  <tr>
    <td />

    <td colSpan={2}>1. On the property panel, choose Article content > Static data > Edit.<br />2. For Link type, choose Select app.<br />3. Click Select app.<br />4. The app dialog shows YiDA apps and DingTalk apps you have permission to access.</td>
  </tr>
</table>

#### 3) Announcement

For other basic properties, see [this document](/yida/portal/ik3610wn0kc5twhv).

<table>
  <tr>
    <td>**Announcement preview**</td>
    <td colSpan={2}>**Configuration steps**</td>
  </tr>

  <tr>
    <td />

    <td colSpan={2}>1. On the property panel, choose Announcement content > Static data > Edit.<br />2. For Link type, choose Select app.<br />3. Click Select app.<br />4. The app dialog shows YiDA apps and DingTalk apps you have permission to access.</td>
  </tr>
</table>

#### 4) Quick Entry

For other basic properties, see [this document](/yida/portal/kb5a0gh7oq93ffgl).

<table>
  <tr>
    <td>**Quick entry preview**</td>
    <td colSpan={2}>**Configuration steps**</td>
  </tr>

  <tr>
    <td />

    <td colSpan={2}>1. On the property panel, choose Quick entry > Edit.<br />2. For Link type, choose Select app.<br />3. Click Select app.<br />4. The app dialog shows YiDA apps and DingTalk apps you have permission to access.</td>
  </tr>
</table>

### 3.6 Space Portals Support DingTalk To-Do Integration

You can integrate DingTalk To-Do into YiDA space portals through two components: To-Do metrics and To-Do list.

**To-Do list** is a tool for managing and tracking tasks or pending items. It appears as a task checklist that helps users organize their work efficiently.

**To-Do metrics** is a statistics and visualization tool for the status of items in the To-Do list. It gives users a data-driven view of overall task progress and encourages goal-oriented completion.

#### 1) To-Do List

<table>
  <tr>
    <td>**Preview**</td>
    <td>**Property**</td>
    <td>**Description**</td>
  </tr>

  <tr>
    <td rowSpan={5} />

    <td>**Style library**</td>
    <td>**Switch between list styles.**</td>
  </tr>

  <tr>
    <td>**Title bar**</td>
    <td>**On by default. Can be turned off.**<br />**When on, configure the title text, help tip, and View more.**</td>
  </tr>

  <tr>
    <td>**YiDA To-Do**</td>
    <td>**Set To-Do content to YiDA To-Do. Only workflow task data from YiDA is included.**<br /><ul><li>**To-Do list type:** "Pending my action", "Created by me", "Processed by me", "CC to me".</li></ul></td>
  </tr>

  <tr>
    <td>**DingTalk To-Do**</td>
    <td>**Set To-Do content to DingTalk To-Do.**<br /><ul><li>**To-Do category: Select one or more To-Do categories.**</li></ul><br />To-Do category options match the top-level categories in DingTalk To-Do for the organization, as shown below:<br /><ul><li>**To-Do list type:** "Pending my action", "Created by me", "Processed by me", "Participated by me".</li><li>**Click More**: opens the DingTalk To-Do Center.</li><li>**Click a specific to-do task** to open the DingTalk To-Do Center and jump to that task.</li></ul></td>
  </tr>

  <tr>
    <td>**Display device**</td>
    <td>**Display device: both platforms or PC only.**</td>
  </tr>
</table>

#### 2) To-Do Metrics

<table>
  <tr>
    <td>**Preview**</td>
    <td>**Property**</td>
    <td>**Description**</td>
  </tr>

  <tr>
    <td rowSpan={5} />

    <td>**Style library**</td>
    <td>Blue by default. Switch to other styles as needed.</td>
  </tr>

  <tr>
    <td>**Show title**</td>
    <td>On by default. Can be turned off.<br />When on, configure the title text, help tip, and View more.</td>
  </tr>

  <tr>
    <td>**YiDA To-Do**</td>
    <td>Set **To-Do content** to YiDA To-Do. Statistics include only workflow task data from YiDA.<br /><ul><li>**To-Do list type:** "Pending my action", "Created by me", "Processed by me", "CC to me".</li></ul></td>
  </tr>

  <tr>
    <td>**DingTalk To-Do**</td>
    <td>Set **To-Do content** to DingTalk To-Do.<br /><ul><li>**To-Do category: Select one or more To-Do categories.**</li><li>**To-Do metrics**: metrics become "Pending my action", "Created by me", "Processed by me", "Participated by me".</li><li>**Click a metric**: opens the DingTalk To-Do Center.</li></ul><br /><ul /></td>
  </tr>

  <tr>
    <td>**Display device**</td>
    <td>**Display device: both platforms or PC only.**</td>
  </tr>
</table>