# XML Configuration

Widget's development process consists of a few simple steps to let your widget start work for you.

###  XML configuration file:

  
The core of the whole widget. This one specifies visibility for specific groups, determines in which module should widget be located and how should it be called in the panel. The syntax and layout configuration is similar to every XML OTRS configuration.

There are two ways to configure widgets in the module:

- **Specifying the widgets array directly in the module's configuration file:**

```XML
   <Setting Name="OTRSFrontendModule::LatestActivity" Required="0" Valid="0">
        <Description Translatable="1">Customer user latest activity menu module.</Description>
        <Navigation>CustomerFrontend</Navigation>
        <Value>
            <Hash>
                <Item Key="id">LatestActivity</Item>
                <Item Key="type">module</Item>
                <Item Key="text">Latest Activity</Item>
                <Item Key="to">/module/LatestActivity</Item>
                <Item Key="icon">timeline</Item>
                <Item Key="priority">110</Item>
                <Item ValueType="Textarea" Key="widgets">
                    [
                        {
                        "props": {
                        },
                        "id": "5",
                        "widgetFile": "WIDGET_Timeline.js",
                        "compiled": false,
                        "view" : "Dashboard",
                        "slot" : "slot3",
                        "name": "Latest Activity"
                      }
                    ]
                </Item>
            </Hash>
        </Value>
    </Setting>
```

- **Specifying widget as a separate configuration:**

```XML
<?xml version="1.0" encoding="UTF-8" ?>
<otrs_config version="2.0" init="Application">


	  <!--Core configuration containing module settings and additional properties-->
  	  <!--Setting location's name should be set in "OTRSFrontendModule::XYZ-->
      <Setting Name="OTRSFrontendModule::<MODULE_NAME>Widget#1000" Required="0" Valid="1">
         <!--Description visible in system configuration-->
        <Description Translatable="1">Additional Ticket module widget for Intalio Customer Panel.</Description>
        <Navigation>CustomerFrontend</Navigation>
        <Value>
            <Hash>
                 <!--JSON configuration file-->
                <Item ValueType="Textarea" Key="schema">
                      {
                          "props": {
                          },
                          "id": "1000",
                          "widgetFile": "WIDGET_XYZ.js",
                          "compiled": false,
                          "view" : "TicketPreview",
                          "slot" : "slot4",
                          "name": "XYZ"
                      }
                </Item>
            </Hash>
        </Value>
    </Setting>

</otrs_config>

```

#### Schema

The schema file is a JSON file. It specifies the most important aspects of the whole widget.

```JSON
 {
   "props": {
     "predefined_property": true
   },
   "id": "1000",
   "widgetFile": "WIDGET_Contract.js",
   "compiled": false,
   "view" : "TicketPreview",
   "slot" : "slot4",
   "name": "Contracts"
}
```

- <span style="color: #993300;">*&lt;**props**&gt;* </span>  
    Specify predefined properties that could be referenced in the template file
- <span style="color: #993300;">*&lt;**id**&gt;* </span>  
    <span style="color: #000000;">An **identification key** for your widget. Should be unique for every module**.** Id is responsible for creating unique widget settings for every user.  
    </span>
- <span style="color: #993300;">*&lt;**widgetFile**&gt;* </span>  
    Template file's name - see more on [the widget's template file](https://docs.intalioservices.com/books/customer-panel---developer-guide/page/template "Template").
- <span style="color: #993300;">*&lt;**view**&gt;* </span>  
    Specify the primary module where should widget be located. You can choose between multiple options starting, from predefined modules ending up to your own custom modules. You can find a more detailed explanation on [the administration section](https://docs.intalioservices.com/books/customer-panel---installation-and-administrators-guide/page/modules "Modules"),
- <span style="color: #993300;">*&lt;**compiled**&gt;* </span>  
    ????????,
- <span style="color: #993300;">*&lt;**slot**&gt;* </span>   
    This label specifies a place on the layout where should widget be put in the module.

<p class="callout warning">&lt;**Slot**&gt; property is required while creating a widget in the TicketPreview module.</p>

<p class="callout info">You can display slot layout by adding query parameter - "dev=1" to the URL parameters eg. '/customer-panel/ticketPreview/000014/?dev=1'</p>

#### [![slot2.png](https://docs.intalioservices.com/uploads/images/gallery/2020-07/scaled-1680-/ZQzzAs4g1Ny5yr7z-slot2.png)](https://docs.intalioservices.com/uploads/images/gallery/2020-07/ZQzzAs4g1Ny5yr7z-slot2.png)

#### CustomRedirectQuery

Since `v1.1.41` in the configuration of the widget responsible for the list of tickets, you can define additional parameters passed to the TicketPreview module. If you add a new parameter in `props => defaultConfig => customRedirectQuery` you can easily manage them in the TicketPreview module eg.

```JSON
[
   {
      "id" : "8",
      "widgetFile" : "ticket-list",
      "name" : "Tickets: Example queue",
      "view" : "module",
      "compiled" : true,
      "props" : {
         "defaultConfig" : {
            "customRedirectQuery" : {
               "queue" : "ExampleQueryParam"
            }
         }
      }
   }
]
```

In this example clicking on the specific ticket in the ticket list will result with URL like this:

`https://<OTRS_URL>/otrs/route.pl/customer-panel/ticketPreview/<TICKET_NUMBER>?queue=ExampleQueryParam`