B4J Tutorial SithasoDaisy: How to create a Client List Report in MS Word

Hi

By the end of this, you will be able to:

1. Get a client list from a REST API database. For this case we will use a fake REST API fom https://randomuser.me/
2. Load this client list to a SDUITable. We will use the abstract designer & then add columns to the table.
3. Export this client list to a MS Word Document as a report. We will define and create our template and save it on our assets.

From

To

Let's begin.

 

[Mashiane]

Step 1: Testing our REST API endpoint.

We fire up POSTMAN and then execute a GET for 100 of our "clients". This gives us the result we will use, we will use some fields from this result to generate our client report.

 

[Mashiane]

Step 2: Design our MS Word Client List template

We fire up MS Word and then create a table with the columns we want to repot on. For each "client', we want to show the following "fields"

1. title
2. first
3. last
4. email
5. phone
6. cell
7. nat

We will pass a list "variable" to the word document, this List, we will give it a name of "clients".

NB: In our table we prefix the row with {#clients}{/}. This tells the compiler that we are passing an array here and multiple records will be created.

We save the word document as users_report.docx in our projects assets via the Files tab.

 

[Mashiane]

Step 3: Create our App

If you don't have SithasoDaisy UI Toolkit, you can get it.

1. The Creating WebApps section of the TailwindCSS WebApps using B4x ebook will guide you on how to create a SithasoDaisy WebApp.
2. You can use any of the provided project templates. We recommend you use SithasoDrawer.

3. Add a new page to your project, see Creating WebApps\Creating a Page in the ebook.

Name the code module demoADClients. In the code name you page as adclients, you can also give it a title like "AD Clients" and also specify an icon from font awesome.

This is the page that we want to create, its a layout that has a SDUIPage and a SDUITable.

Save the layout as adclientslayout after updating these properties on each of the components.

Also generate the following events for tblClients

1. refresh
2. prevPage
3. nextPage

 

[Mashiane]

Step 4: Adding a Link of our page to the app drawer in pgIndex

We want our page to be accessible from the drawer, so we need to add it there.

You can either add this code to add the clients page as a child of a section already existing

appdrawer.AddItemChildPage("pages", demoADClients)

or this method to make it stand alone.

appdrawer.AddItem("pages", demoADClients)

So when each drawer item is clicked, the drawer will be closed and anything identifiable as a page will be shown.

Private Sub appdrawer_menu_Click (item As String)
    'hide the drawer
    drawer.Close
    
    'we have navigated to a page, exit
    If app.ShowPage(item) Then Return
    '
    If item.StartsWith("api-") Then
        sithasoAPI.compname = item
        sithasoAPI.Show(app)
        Return
    End If
    
    'we have code that does not open a page
    Select Case item
    Case "rightdrawer"
        drwRight.show
    Case "leftdrawer"
        drwLeft.show
    End Select
End Sub

Some code here has been added for brevity.

 

[Mashiane]

Step 5: Coding the demoADClients Page

When a page is shown, it calls..

Sub Show(duiapp As SDUIApp)            'ignore

Internally, this calls BuildPage after loading the layout to the body>appdrawer>content>pageviewer component.

5.1 Adding columns to our table.

'start building the page
private Sub BuildPage
    tblClients.AddColumn("title", "Title")
    tblClients.AddColumn("first", "First Name")
    tblClients.AddColumn("last", "Last Name")
    tblClients.AddColumn("email", "Email")
    tblClients.AddColumn("phone", "Phone")
    tblClients.AddColumn("cell", "Cellphone")
    tblClients.AddColumn("nat", "Nationality")
    '***COMPULSORY
    tblClients.AddDesignerColums
    '***
  
    tblClients.AddToolbarActionButtonIcon("print", "fa-solid fa-print", app.COLOR_INDIGO)
    mounted
End Sub

In the table we add the columns we will show to it. We also add the "print" button icon, so that we can convert our table to MS Word. If there are any "action" columns, these will be added by .AddDesignerColumns.

This then calls mounted. Mounted in this case is just a sub we named mounted, it could be any sub name, this will be called when refresh is clicked, without having to re-create the table columns again.

5.2 Adding the code to fetch the client list from the REST API database and load it to the table

Sub mounted
    'initialize the list to store our clients
    masterClients.Initialize
    'initialize BANanoFetch
    Dim clients As SDUIFetch
    'pass the base url for the api
    clients.Initialize("https://randomuser.me/api")
    'we want only 100 client records
    clients.AddParameter("results", 100)
    'the content type should be JSON
    clients.SetContentTypeApplicationJSON
    'execute the GET call
    banano.Await(clients.fetchWait("GET"))
    If clients.Success Then
        'on success, get the results
        Dim Response As Map = clients.response
        Dim results As List = Response.get("results")
        'loop through each to get the schema that we want for the list
        'as per fields we have defined.
        For Each client As Map In results
            Dim c As Map = CreateMap()
            c.Put("email", client.Get("email"))
            c.Put("title", SDUIShared.GetRecursive(client, "name.title"))
            c.Put("first", SDUIShared.GetRecursive(client, "name.first"))
            c.Put("last", SDUIShared.GetRecursive(client, "name.last"))
            c.Put("phone", client.Get("phone"))
            c.Put("cell", client.Get("cell"))
            c.Put("nat", client.Get("nat"))
            'add to the master client list
            masterClients.Add(c)
        Next
        'update the table and use pagination
        tblClients.SetItemsPaginate(masterClients)
    Else
        Log(clients.ErrorMessage)
    End If
End Sub

When we run the app, click on the drawer item for the clients page, it will execute show>buildpage>mounted. This builds the table columns, execute the GET and shows the clients in a paginated fashion.

 

[Mashiane]

5.3 Refreshing & Pagination

When refresh is clicked, we want to call mounted so that the client list is retrieved again. As this is fake data, the client list will change somehow.

Private Sub tblClients_Refresh (e As BANanoEvent)
    banano.await(mounted)
End Sub

We are fetching 100 clients and have set our records per page to be 10, so clicking prevPage and nextPage should scroll our clients.

Private Sub tblClients_PrevPage (e As BANanoEvent)
    tblClients.ShowPreviousPage
End Sub

Private Sub tblClients_NextPage (e As BANanoEvent)
    tblClients.ShowNextPage
End Sub

5.4 Exporting our client list to MS Word.

Generating this MS Word report will take place when we click the print button our table. We added this button on BuildPage when we defined the table. The button will be linked to a click event that is the table name + button name we have specified.

Sub tblClients_print (e As BANanoEvent)
    'do we have a client list
    If masterClients.Size = 0 Then
        app.ShowSwalError("No clients to process!")
        Return
    End If
    '
    'show a loading indicator on print button
    tblClients.ToolbarButtonLoading("print", True)
  
    'initialize the ms word document builder
  
    Dim doc As SDUIDocxTemplator
    'this will raise an event called docx_finished.
    'we give it the template we created and the name of the download we want
    doc.Initialize(Me, "docx", "./assets/users_report.docx", "client_report.docx")
    'we set the 'clients' field, passing it the list of clients
    doc.SetField("clients", masterClients)
    'we build our document
    banano.Await(doc.BuildWait)
  
    tblClients.ToolbarButtonLoading("print", False)
  
End Sub

And when the word report is complete, it raises the finish event.

Sub docx_finished
    app.ShowSwalSuccess("Report finished!")
End Sub

Congratulations, we are finished.

Happy SithasoDaisy coding!!

PS: This demo project is part of the SithasoDaisy bundle coming to version 1.16.

Related content

SithasoDocxTemplator: Creating MS Word Documents from Dynamic Templates in JavaScript

Hi the This was an interesting find: https://docxtemplater.com/, also its just so easy to use and understand. Below is my template. I am attempting to generate the API documentation for the SithasoDaisy ebook. This was easy to achieve using tables on the demo. And yes, I could fire up...

www.b4x.com