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:

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

• Select the TimeLine E3 installation to customize

• Pick the server connection

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

• Add a new project web project

• Add a new web module

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

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

<?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.

<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

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

• 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.

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

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

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: