> 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:

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXf5GuikRIHooatf_sm%2Fuploads%2Fgit-blob-0d4dc31ae197162bc2531c7e6e2a5adaf096eb33%2FWEB_Create_1.png?alt=media)

* Click on ‘New Customized Product’ to create a new customization

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXf5GuikRIHooatf_sm%2Fuploads%2Fgit-blob-2ec999b00fade9664284ba39d9aac38cc1f4acbe%2FWEB_Create_2.png?alt=media)

* Select the TimeLine E3 installation to customize

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXf5GuikRIHooatf_sm%2Fuploads%2Fgit-blob-8506a4dda2a877784b162f2f30ad05fef3c60ff5%2FWEB_Create_3.png?alt=media)

* Pick the server connection

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXf5GuikRIHooatf_sm%2Fuploads%2Fgit-blob-c44e27bfa48897afc0fdd3b3201002492adbfece%2FWEB_Create_4.png?alt=media)

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

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXf5GuikRIHooatf_sm%2Fuploads%2Fgit-blob-1e1417b8a770e2a21992f9a9a770a61dde63c91f%2FWEB_Create_5.png?alt=media)

* Add a new project web project

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXf5GuikRIHooatf_sm%2Fuploads%2Fgit-blob-a033c1edf985eeef55b70dc66e4f2ec9c967bc7c%2FWEB_Create_6.png?alt=media)

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXf5GuikRIHooatf_sm%2Fuploads%2Fgit-blob-67548a7b593ec5b1b3dd0fe32d4ad469ce26a7ed%2FWEB_Create_7.png?alt=media)

* Add a new web module

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXf5GuikRIHooatf_sm%2Fuploads%2Fgit-blob-8cdeb2a966714f8ab171cc2114a9d84eb518d5f9%2FWEB_Create_8.png?alt=media)

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXf5GuikRIHooatf_sm%2Fuploads%2Fgit-blob-a64c7ebad43b04d755d10f1d7f167b3070d885dd%2FWEB_Create_9.png?alt=media)

* Drag a table on the XAML designer to create a datapanel

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXf5GuikRIHooatf_sm%2Fuploads%2Fgit-blob-88417475b6a2a0b0dd67032cdeeeba1952a5e8ba%2FWEB_Create_10.png?alt=media)

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXf5GuikRIHooatf_sm%2Fuploads%2Fgit-blob-4fcb68cccf803906146a58997688564663b62b59%2FWEB_Create_11.png?alt=media)

* 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

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXf5GuikRIHooatf_sm%2Fuploads%2Fgit-blob-1127c6304ad3630f03d243aa901bc4c025cfceb8%2FWEB_Create_12.png?alt=media)

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXf5GuikRIHooatf_sm%2Fuploads%2Fgit-blob-2414c4f1143169539d2bccee4f36930cd3d0cd87%2FWEB_Create_13.png?alt=media)

{% 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.

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXf5GuikRIHooatf_sm%2Fuploads%2Fgit-blob-ce27ebee5790f94e2c463198eba58d040de7e697%2FWEB_Create_14.png?alt=media)

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

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXf5GuikRIHooatf_sm%2Fuploads%2Fgit-blob-fcbc3ad3bf72d5ff0682394ca4fbe35b051e1b20%2FWEB_Create_15.png?alt=media)

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

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXf5GuikRIHooatf_sm%2Fuploads%2Fgit-blob-b8be150ce8131e43ab9dca64639e018139a4f39e%2FWEB_Create_16.png?alt=media)
