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

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXf5GuikRIHooatf_sm%2F-MdQl_Z-5IPjU2mE8hJB%2F-MdQxHWbXVG2FrhXZb4z%2FWEB_Create_1.png?alt=media\&token=2537ce71-7c9e-4cd1-8320-904a22f3fd22)

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

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXf5GuikRIHooatf_sm%2F-MdQl_Z-5IPjU2mE8hJB%2F-MdQxOG-OOp6HCLiWRXX%2FWEB_Create_2.png?alt=media\&token=f75843d4-8af4-42d4-a2d2-1ae3b05095fa)

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

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXf5GuikRIHooatf_sm%2F-MdQl_Z-5IPjU2mE8hJB%2F-MdQxdfA0pzqtVrseQ-3%2FWEB_Create_3.png?alt=media\&token=e2217666-ae65-40b3-be4e-423b1b382313)

* Pick the server connection&#x20;

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXf5GuikRIHooatf_sm%2F-MdQl_Z-5IPjU2mE8hJB%2F-MdQxsfiREtYcWni2c8e%2FWEB_Create_4.png?alt=media\&token=e6b99c2f-9ac7-430b-ab6a-ce82a826068e)

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

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXf5GuikRIHooatf_sm%2F-MdQl_Z-5IPjU2mE8hJB%2F-MdQy6kIW4gnWxylSM4p%2FWEB_Create_5.png?alt=media\&token=ba6a318d-236b-4491-ac36-213d47c7a4b1)

* Add a new project web project

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXf5GuikRIHooatf_sm%2F-MdQl_Z-5IPjU2mE8hJB%2F-MdQyGSpP0iKPwnkoAXn%2FWEB_Create_6.png?alt=media\&token=168f6164-234a-4697-bbdf-cce932d9b25e)

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXf5GuikRIHooatf_sm%2F-MdQl_Z-5IPjU2mE8hJB%2F-MdQyNmFKFVmDOydZ4hR%2FWEB_Create_7.png?alt=media\&token=d7bb832b-04d7-49bb-b728-9af8bdbf0ed2)

* Add a new web module

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXf5GuikRIHooatf_sm%2F-MdQl_Z-5IPjU2mE8hJB%2F-MdQyWS4RpUAAr9SZj9o%2FWEB_Create_8.png?alt=media\&token=183e2bb8-a0d8-4d8e-8121-fbc966d74c53)

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXf5GuikRIHooatf_sm%2F-MdQl_Z-5IPjU2mE8hJB%2F-MdQyfKkH1mnuyNWBXHc%2FWEB_Create_9.png?alt=media\&token=e99cb75a-347c-471f-92d7-451a6d7b3ced)

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

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXf5GuikRIHooatf_sm%2F-MdQl_Z-5IPjU2mE8hJB%2F-MdQylEgU5t3V31OqKVf%2FWEB_Create_10.png?alt=media\&token=5da8c1ce-0788-4417-bb2b-78d403af88c7)

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXf5GuikRIHooatf_sm%2F-MdQl_Z-5IPjU2mE8hJB%2F-MdQyrfvQZ4ITkc5ywdK%2FWEB_Create_11.png?alt=media\&token=f8bf32fa-fe39-4fc5-8cd0-bcfbdafa9ede)

* 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;

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXf5GuikRIHooatf_sm%2F-MdQl_Z-5IPjU2mE8hJB%2F-MdQzj7IZ6CfX2JO8l2O%2FWEB_Create_12.png?alt=media\&token=7beaeac4-deca-4f91-bacd-79e26b263682)

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXf5GuikRIHooatf_sm%2F-MdQl_Z-5IPjU2mE8hJB%2F-MdQznfqvBYfur0a3hIj%2FWEB_Create_13.png?alt=media\&token=2b882b19-310e-4ef4-8b40-1f14c49c21fa)

{% 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/](http://localhost:52000/) to open the new web app. &#x20;

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXf5GuikRIHooatf_sm%2F-MdQl_Z-5IPjU2mE8hJB%2F-MdR-qy0gR67DE5dVpQr%2FWEB_Create_14.png?alt=media\&token=35fa6d5f-0e5d-41fc-aefd-1aed5438e907)

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

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXf5GuikRIHooatf_sm%2F-MdQl_Z-5IPjU2mE8hJB%2F-MdR05kqidz2tUA3n6hH%2FWEB_Create_15.png?alt=media\&token=e3f25d50-14e0-4902-8dc6-729ec8f522a0)

* 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;

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXf5GuikRIHooatf_sm%2F-MdQl_Z-5IPjU2mE8hJB%2F-MdR0TvMw10zz_wewuvO%2FWEB_Create_16.png?alt=media\&token=57986638-afdc-4fcb-8a80-0701f6b4583e)
