> For the complete documentation index, see [llms.txt](https://tldocs.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tldocs.gitbook.io/documentation/deprecated/timeline-web/creating-a-small-web-module-with-tld.md).

# 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)
