# Building Screen Widgets

The widget can be found in Screen Designer and is configured with the following string properties.

<figure><img src="https://content.gitbook.com/content/6Ckybwmt0tmi7y8MgYX4/blobs/Hn3QxLjV61k3bAwHdI9e/image.png" alt=""><figcaption></figcaption></figure>

The example below uses the Person screen, but these widgets can be placed on any screen in ASM if you modify the properties - See the API documentation for more information. &#x20;

## Adding a Widget to your Screen - Widget Properties

When you first add a widget to the screen it will appear as a solid grey box that spans all columns.  You cannot resize the columns. &#x20;

<figure><img src="https://content.gitbook.com/content/6Ckybwmt0tmi7y8MgYX4/blobs/Df3eNOE32th1D6uYNxNS/Screenshot%202023-05-12%20at%2010.05.45%20AM.png" alt=""><figcaption></figcaption></figure>

After you have added your widget:

1. Highlight the widget so it has the focus
2. Set the Widget id to "data-grid"
3. Enter your widget properties (see known issues and examples below). &#x20;

{% hint style="warning" %}

## Caution

These fields are case sensitive.  They must be all lower case without spaces unless specified otherwise.
{% endhint %}

## API Data Grid Query Builder

You can build a string using the following interface:

`https://[server]/[system]/alemba.web.widgets/?widgetid=data-grid`

* Replace \[server]/\[system] with your specific system URL.
* You will need some knowledge of the API to modify the string properties by screen/entity.

## Sample Widgets

### Person Screen: Users Assigned Assets/Configuration Items

{% code overflow="wrap" %}

```
{"entityType":"configuration-item","navigationEntityType":"asset","columns":"Ref,Name,Type:InfraEntityType.Name, Manufacturer:Manufacturer.Name,ModelType:ModelType.Name","headers":",Assigned Assets, Type,Manufacturer,Model","filters":"!@IsDeleted","sorting":"off","pageFilters":"[{\"id\":\"REF\",\"apiId\":\"User\"}]","orderBy":"","sortBy":""}
```

{% endcode %}

### Person Screen: Users Assigned Software where the person is a stakeholder

{% code overflow="wrap" %}

```
{"entityType":"person-to-asset-stakeholder-link","navigationEntityType":"asset","columns":"Ref:Target.Ref,Asset:Target.Name,ModelType:Target.ModelType.Name,Type:Target.InfraEntityType.Name","headers":"Assigned Applications,Module,Type","filters":"!@IsDeleted","sorting":"on","pageFilters": "[{\"id\":\"REF\",\"apiId\":\"Holder.Ref\"}]","orderBy":"Target.InfraEntityType.Name","sortBy":"Model"}
```

{% endcode %}

### Task Screen: Config items belonging to a user

{% code overflow="wrap" %}

```
{"entityType": "configuration-item", "navigationEntityType":"asset","columns": "Ref:Target.Ref, Type:InfraEntityType.Name, Manufacturer:Manufacturer.Name, ModelType:ModelType.Name", "headers": ",Title, Type, Manufacturer, Model", "filters": "", "sorting": "off", "pageFilters": "[{\"id\":\"REQUEST:REQUESTOR_REF\",\"apiId\":\"User\"}]", "orderBy": "", "sortBy": ""}
```

{% endcode %}

### Portal homepage: Show the calls awaiting your action and any that are open/resolved open/unresolved

{% code overflow="wrap" %}

```
{"entityType":"call","navigationEntityType":"call","Ref:Target.Ref",columns":"Ref,CreatedDate,ShortDescription,Product:ConfigurationItem.Name,Status:CallStatus.Name","headers":"No.,Date Raised,Description,Product,Status","sorting":"on","filters":"UserId%20%3D%3D%20%40UserId%26%26(OpenStatus=1%7C%7COpenStatus=2%7C%7COpenStatus=3)%26%26CallStatus.IsAwaitingAction=1"}
```

{% endcode %}

## Known Issues

{% hint style="info" %}
There is a known issue where the quety results may return deleted field values and records since the query will pull everything.  To counter this, add the following to your widget properties:

**Status=='A'&\&Target.Status=='A'**
{% endhint %}

{% hint style="info" %}
There is a known issue with widgets wherein you will need to add the following to the widget properties to make the data in the widget "clickable":

<mark style="color:red;">**"navigationEntityType": "asset"**</mark>

Re&#x66;**:**<mark style="color:red;">**Target.Ref**</mark>

**Example:**

{\
&#x20;   "entityType": "person-to-asset-stakeholder-link",

&#x20;   <mark style="color:red;">**"navigationEntityType": "asset",**</mark>\
&#x20;   "columns": "Re&#x66;**:**<mark style="color:red;">**Target.Ref**</mark>,Asset:Target.Name,Type:Target.InfraEntityType.Name",\
&#x20;   "headers": "**,**&#x41;sset,Type",\
&#x20;   "filters": "!@IsDeleted",\
&#x20;   "sorting": "off",\
&#x20;   "pageFilters": "\[{\\"id\\":\\"REQUESTOR\_REF\\",\\"apiId\\":\\"Holder.Ref\\"}]",\
&#x20;   "orderBy": "Target.InfraEntityType.Name",\
&#x20;   "sortBy": "Type"\
}
{% endhint %}

{% hint style="info" %}
There is a Known Issue with syntax where if you use the API data-grid query builder, and then use the "copy code" button in 10.6.7, it puts in the incorrect syntax (Slashes and spaces) into the code breaking the widget on lower versions. It also stops any widgets showing on the page.&#x20;

Example:

Copied Code:   "pageFilters": <mark style="color:red;">"</mark>\[{<mark style="color:red;">\\</mark>"id<mark style="color:red;">\\</mark>":<mark style="color:red;">\\</mark>"REF<mark style="color:red;">\\</mark>",<mark style="color:red;">\\</mark>"apiId<mark style="color:red;">\\</mark>":<mark style="color:red;">\\</mark>"Holder.Ref<mark style="color:red;">\\</mark>"}]<mark style="color:red;">"</mark>,

Should be&#x20;

&#x20;  "pageFilters":\[{"id":"REF","apiId":"Holder.Ref"}],
{% endhint %}

{% hint style="info" %}
Even though you will see a resize option in screen designer, for widgets, this option is not viable. &#x20;
{% endhint %}