# Creating a small web module with TLD

* Install the latest TLD kit (server kit)
* Make sure the 2 services required by the new WASM modules are running:&#x20;

![](/files/-MdQxHWbXVG2FrhXZb4z)

* Click on ‘New Customized Product’ to create a new customization &#x20;

![](/files/-MdQxOG-OOp6HCLiWRXX)

* Select the TimeLine E3 installation to customize&#x20;

![](/files/-MdQxdfA0pzqtVrseQ-3)

* Pick the server connection&#x20;

![](/files/-MdQxsfiREtYcWni2c8e)

* Select the location for the customization and give it a meaningful name

![](/files/-MdQy6kIW4gnWxylSM4p)

* Add a new project web project

![](/files/-MdQyGSpP0iKPwnkoAXn)

![](/files/-MdQyNmFKFVmDOydZ4hR)

* Add a new web module

![](/files/-MdQyWS4RpUAAr9SZj9o)

![](/files/-MdQyfKkH1mnuyNWBXHc)

* Drag a table on the XAML designer to create a datapanel&#x20;

![](/files/-MdQylEgU5t3V31OqKVf)

![](/files/-MdQyrfvQZ4ITkc5ywdK)

* Customize the standard TLMenu for web by moving to the “Resources” tab in the solution explorer and right-clicking on the Config folder -> customize menu. Delete the standard code in the generated TLMenu.xml file and replace it with this:

```markup
<?xml version="1.0" encoding="utf-8" ?>
<Menu Header="TLMenu" Title="" AutoCloseMain="True">  
  <MenuItem ID="riBookingModules" Module="" Header="Booking modules" Image="Warehouse" Shortcut="" Offline="False" OpenArgument="">
    <MenuItem ID="" Module="modTaskFeedback" Header="Task Feedback" Image="User" Shortcut="" Offline="False" OpenArgument="" Platform="Web" />
    <MenuItem ID="" Module="modKonfigurationMobileDatenerfassung" Header="SMS" Image="Warehouse" Shortcut="" Offline="False" OpenArgument="" Platform="Web" />
    <MenuItem ID="" Module="modWarehouseProtocol" Header="Warehouse Artikel Transfer" Image="Warehouse" Shortcut="" Offline="False" OpenArgument="BOOKTYPE=060" Platform="Web" />
    <MenuItem ID="" Module="modWarehouseProtocol" Header="Warehouse Entry" Image="Warehouse" Shortcut="" Offline="False" OpenArgument="BOOKTYPE=100" Platform="Web" />
    <MenuItem ID="" Module="modWarehouseProtocol" Header="Warehouse Exit" Image="Warehouse" Shortcut="" Offline="False" OpenArgument="BOOKTYPE=020" Platform="Web" />
  </MenuItem>
  </Menu>
```

* Adjust the TLMenu to contain a new entry for the newly added module.

```markup
<MenuItem ID="" Module="modWebModule1" Header="My web module" Image="LedGreen" Shortcut="" Offline="False" OpenArgument="" Platform="Web" />
```

* Right click the solution and select publish in order to deploy the changes to the server &#x20;

![](/files/-MdQzj7IZ6CfX2JO8l2O)

![](/files/-MdQznfqvBYfur0a3hIj)

{% hint style="info" %}
**NOTE:** If you’re having trouble compiling web projects, make sure you don’t have .NET Core 5.0 or later installed because at the moment of writing this document there is a bug where building a web project in TLD at this time fails if .NET Core 5.0+ is installed
{% endhint %}

* Open a web browser (preferably Google Chrome or a Chromium based browser, although Firefox and Safari also work) and visit <http://localhost:52000/> to open the new web app. &#x20;

![](/files/-MdR-qy0gR67DE5dVpQr)

* Enter the credentials and you should be able to see your module to the left-hand side &#x20;

![](/files/-MdR05kqidz2tUA3n6hH)

* Let’s load some data in the panel… Open the wndWebModule1.xaml.cs file and write the following code in the OnOpened method:

```csharp
public override async Task OnOpened()
{
    await base.OnOpened();
    
    Title = "Hello world!";
    await BusObj.tSet.RetrieveAsync("1000");
}
```

* Now, press the “running man” or F5 key to redeploy the new code to the server. Take a look at the browser window. If everything worked, this should be the result: &#x20;

![](/files/-MdR0TvMw10zz_wewuvO)


---

# 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://tldocs.gitbook.io/documentation/deprecated/timeline-web/creating-a-small-web-module-with-tld.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.
