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

# Building web panels

> How to build and develop web panels with links and template variables

<Note>
  After adding a web panel it is good practice to [flush caches][7] in the application.
</Note>

## Link to a web panel

You can **add a link** in your web panel that will load another panel when pressed.

The HTML `<a>` tag has multiple attributes. In addition to the **href** attribute, we can set the **target** attribute to specify *where* to open the link.

Syntax:

```html theme={null}
<a target="_blank|_self|_parent|_top|framename">
```

* To open a link in a new browser window, set `target="_blank`
* To open a link **in your panel**, set `target=<window name>`

For example, `target="project.pdetails"` with link text *Show project info*.

<h2 id="variables">
  Pass data with template variables
</h2>

You can use template variables to pass data to the destination page to tailor it to the client context. This could be information about the current contact, person, or project.

For example, instead of `http://www.search.com/search?q=SuperOffice`, we can use the template variable for *company name* - which is `<name>` - and type `http://www.search.com/search?q=<name>`

### Steps

1. Append the template variables to the URL when editing the [web panel properties][1].
   * Type the URL without padding (no extra spaces). SuperOffice handles the [URL encoding][2].
   * Separate the parameters with an ampersand `&`.

2. Write the code of the target webpage so that it does something useful with the template variables.

### Available variables

* [For CRM][4]
* [For Service][5]

### Hidden variables

You can also pass template variables as **hidden variables** in your [custom screens][6]. And then do something like this in the suitable load or creation script:

```crmscript theme={null}
User u;
u.load(getVariable("activeUser").toInteger());
```

[1]: ../admin/add-web-panel#fields

[2]: ../admin/url-encoding

[4]: ../../../document/templates/index

[5]: ../../../knowledge-base/learn/reply-templates/template-variables

[6]: /en/ui/blogic/custom-screens/index

[7]: https://github.com/SuperOfficeDocs/superoffice-docs/blob/main/docs/en/api/caching/flush-cache.md


## Related topics

- [Web panels](/en/customization/web-panels/admin/index.md)
- [Add web panel](/en/customization/web-panels/admin/add-web-panel.md)
- [Delete Web Panel](/en/api/reference/restful/agent/list_agent/delete-web-panel.md)
- [Delete Web Panel Entity](/en/api/reference/restful/rest/list_webpanel/delete-web-panel-entity.md)
- [Get Web Panel Entity](/en/api/reference/restful/rest/list_webpanel/get-web-panel-entity.md)
- [Put Web Panel Entity](/en/api/reference/restful/rest/list_webpanel/put-web-panel-entity.md)