# Client Profiles

Wisej.NET has a unique and powerful responsive system that extends beyond CSS and media selectors used in plain HTML+CSS systems. The responsive system in Wisej.NET is based on two features: [Responsive Properties](https://docs.wisej.com/docs/controls/general/responsive-properties) and [`ClientProfile`](https://docs.wisej.com/api/wisej.core/general/wisej.core.clientprofile).

**Client Profiles** are device-related properties associated with a name that match to the client device when the page loads or the browser resizes.

`ResponsiveProperties` are standard .NET properties available at design time (serializable) that use the `[ResponsiveProperty]` attribute. These properties can hold multiple values associated with a **Client Profile**.

{% embed url="<https://youtu.be/qp6cQOQFHWk>" %}

The process is straightforward: Wisej.NET reads the client profiles in `ClientProfiles.json`, and from top to bottom matches the properties with current browser information. The first match becomes the [`Application.ActiveProfile`](https://docs.wisej.com/api/wisej.web/general/application#activeprofile) and triggers the [`ResponsiveProfileChanged`](https://docs.wisej.com/api/wisej.web/general/control/wisej.web.responsiveprofilechangedeventhandler) event.

When the `ActiveProfile` changes, all `[ResponsiveProperties]` update with their values associated to the Client Profile. For example, the *Visible* property of a button can be *true* for the "Default" Client Profile and *false* for the "Galaxy Tablet" profile, or the [`Display`](https://docs.wisej.com/api/wisej.web/enumerations/wisej.web.display) property of a Button or TabControl can be *Both* on Desktops and *Icon* on Phone devices.

## Custom ClientProfiles.json

You can define custom client profiles by adding the `ClientProfiles.json` file to your project. Click Add -> New Item, select Wisej.NET 3 and select ClientProfiles:

It will add the file `ClientProfiles.json` containing the pre-configured profiles:

<figure><img src="https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2FmAgiFPttNfcyZGkdHpBp%2FClientProfiles.png?alt=media&#x26;token=f82687ba-1b91-4969-a4b8-1e66229ab063" alt=""><figcaption></figcaption></figure>

```javascript
/**
 * Client Profiles
 *
 * You can add additional profiles or modify the default ones by
 * placing a ClientProfiles.json file in the /bin directory of the
 * application.
 *
 * Or add it to the root files and set it to: "EmbeddedResource", or "Content" or "Copy if newer".
 *
 * Profiles with names matching the names in the default file will
 * override the corresponding matching profile definition.
 *
 * Profile Properties:
 *
 *	name:            The name of the profile.
 *	minWidth:        The minimum width of browser in pixels.
 *	maxWidth:        The maximum width of browser in pixels.
 *	minScreenWidth:  The minimum width of the device in pixels.
 *	maxScreenWidth:  The maximum width of the device in pixels.
 *	device:          A string or regular expression to match the name of the device returned by the client browser ("Mobile", "Tablet" or "Desktop").
 *	userAgent:       A string or regular expression to match the user-agent string returned by the client browser.
 *	landscape:       A boolean flag that indicates that the profile matches devices in landscape mode.
 */
{
    "profiles": [
        {
            "name": "Phone",
            "device": "Mobile",
            "landscape": false
        },
        {
            "name": "Phone (Landscape)",
            "device": "Mobile",
            "landscape": true
        },
        {
            "name": "Tablet",
            "device": "Tablet",
            "landscape": false
        },
        {
            "name": "Tablet (Landscape)",
            "device": "Tablet",
            "landscape": true
        },
        {
            "name": "Small Desktop",
            "device": "Desktop",
            "maxWidth":  1024
        }
    ]
}
```

| Property         | Description                                                                                                                                                                      |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name`           | Unique name assigned to the profile (e.g., "Large Monitor", "Galaxy Tablet", "Airport Kiosk")                                                                                    |
| `minWidth`       | When > 0, specifies minimum browser width to qualify the profile (e.g., 500px for width >= 500px)                                                                                |
| `maxWidth`       | When > 0, specifies maximum browser width to qualify the profile (e.g., 1500px for width <= 1500px)                                                                              |
| `minScreenWidth` | When > 0, specifies minimum screen width to qualify the profile (e.g., 500px for screen width >= 500px)                                                                          |
| `maxScreenWidth` | When > 0, specifies maximum screen width to qualify the profile (e.g., 1500px for screen width <= 1500px)                                                                        |
| `device`         | Regular expression matching browser-detected device type ("Desktop", "Mobile", or "Tablet"). Example: "(Tablet)\|(Mobile)" matches either "Tablet" or "Mobile"                   |
| `userAgent`      | Regular expression matching browser's [user agent](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent) string. Used to detect specific OS versions or browsers |
| `landscape`      | Boolean indicating if profile matches when browser width exceeds height                                                                                                          |

{% hint style="info" %}
When using the Chrome mobile emulator to switch from desktop to mobile, refresh the page to update client profiles based on screen width or user agents, as these properties don't update dynamically.
{% endhint %}

## ResponsiveProfileChanged

The `ResponsiveProfileChanged` event fires on:

* `Application`
* `ContainerControl` (`Form`, `Page`, `Desktop`, `UserControl`)
* `DataGridView`
* `ListView`

This event allows your code to adapt controls to the client profile without limitations. While responsive properties are useful and easy to use (especially at design time), handling this event in code provides complete control over adaptations.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wisej.com/docs/concepts/client-profiles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.