# Design Portal Page

A portal page can contain one or multiple portlets. The portlets use Components and Applications to fetch and process data.

### Open a Portal Page from the Hub

* Open the application by selecting the Portal Page or use the context menu **Edit in Portal** in Hub.
* The Portal Page is opened.

### Add portlets

* Go to **Add New** and select **Portlet** to open the modal containing the available portlets.
* Choose a portlet and drag it into the design area.
* Enter a name for the portlet and click **Create**.
* Resize the portlet by dragging its edges or corners.
* Move the portlet by grabbing the header banner (where the portlet title is).

<figure><img src="https://1716064794-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIIgl6sNaTky0iALxYWHH%2Fuploads%2FqOCjrfTDaEUeEdzzJBz4%2Fimage.png?alt=media&#x26;token=c450ce95-743d-4068-8fea-4649b376d817" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1716064794-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIIgl6sNaTky0iALxYWHH%2Fuploads%2FEP9tIe2LyRWL59IWJoDj%2Fimage.png?alt=media&#x26;token=1b6d71a8-cf86-4ca8-afe0-e03418c37e8a" alt=""><figcaption></figcaption></figure>

### Portlet configuration <a href="#managing-sequence-arrows" id="managing-sequence-arrows"></a>

* Click **Edit** (the pen icon in the header banner) to modify the portlet.
* Most portlets use a component as the data source, see [Components ](https://docs.novacura.com/flow-connect/working-with-connect/create-and-design/components)for more details.
* For more information about configuring individual portlets, refer to [Portlets](https://docs.novacura.com/flow-connect/reference/reference/portal/design-items/portlets).
* Once the portlet is configured, click **Preview** to run the data source component, fetch the data, and preview it in the portlet.
* When you're happy with the configuration, click **Apply** to save the portlet.

### Copy, cut and delete portlet

Click on the tree dot context menu in the portet header section to open the action menu:

* Select **Delete** to remove a portlet.
* Select **Copy** to duplicate a portlet. The copied portlet will be available in the copy clipboard. *Drag* the clipboard into the design area and *drop* it to create the new portlet. You can copy multiple portlets into the clipboard to create a container (see [Container ](https://docs.novacura.com/flow-connect/reference/reference/portal/design-items/container)for more details). You can add the clipboard to any page, whether it belongs to the same application package or a different one. If the target page is in a different package, the portlet’s data sources will be disconnected unless they are global components.
* Select **Cut** to move a portlet. The cut portlet will be available in the Cut clipboard. *Drag* the clipboard into the design area and *drop* it to place the portlet. You can cut multiple portlets into the clipboard to create a container (see [Container ](https://docs.novacura.com/flow-connect/reference/reference/portal/design-items/container)for more details). You can add the clipboard to any page, whether it belongs to the same application package or a different one. If the target page is in a different package, the portlet’s data sources will be disconnected unless they are global components.