One of my new invoice template layout - Design #2

[Peter Simpson]

Hello all,
I hope that B4X developers and their loved ones are all safe and sound.

Coding is just so easy when using B4J

So as work is going to be a bit quiet until I start my next project in a couple of weeks time, I decided to create myself some standard B4J (only) templates. In the past when I've sat down with potentially new clients, I like to show them past projects that I've worked on either developed using C# or B4X. I find that clients appears to like certain simple but effect layout designs, so starting from last week I created myself a few different data entry forms including 1 x quote form, 2 x stock entry forms, 2 x purchase order forms, 1 x contact form, 1 x warehouse management form and 2 x invoice forms.

As I use JoToolBar in conjunction with MenuBar and also TabPane for most of my clients bespoke projects, I usually find myself ripping entire screen layouts files out of previously completed projects and then I spend too much time getting the code working after making changes, no no no no no not anymore.

The following video shows my latest competed layout, the data is being retrieved from one of my online MySQL database. As the example below is just showing a completed layout, I can easily just add it to a Tab, Panel, Page etc etc etc in a main project with relative ease, also adjusting/adding/removing design cues now only takes a few minutes and not hours like it currently does.

The Treeview is what allows the client to hopefully filter through stock quicker than just scrolling through a long list. I'm going to modify the popup product description list to include a manual search box a bit like the popup customer form, that way customers can just type what they are looking for if they can't find it using the category/sub category filter (the popup Treeview).

Yes I have already added an automatic barcode scanner entry screen, the button is currently set to visible = false.

No I'm not entirely happy with the design of the buttons, but as the button layouts are using the stylesheet, it will only take me a minute to change all the buttons look and field without actually touching the buttons styles themselves.

Peter why why why are you using a Tableview?
Well in fact I've always used Tableviews especially as I've created helpers for basically every single scenario that I've ever come across using them with views. But wait a minute Peter, the popup customer form and also the filtered popup products list are both in fact CustomListviews, yes you are 100% correct they are. For the last couple of years I've used CustomListviews for all sorts of lists, I always use CustomListviews for cards, long lists etc but just not for the data entry forms whilst building invoices, purchase orders, quotes formulations, processing etc. I do use CustonListViews for other types of data entry forms though, and one day in the future I will stop using Tableview altogether in B4J and switch over 100% to CustomListviews, in B4A and B4i I only use CustomListviews and absolutely nothing else. But until that day both solutions work just fine for me. The main reasons why I still like using Tableview are 1. I'm not creating a cross platform application (but I don't have to be), 2. I've created plenty of Tableview helpers that makes Tableview row views a breeze to manipulate whilst coding, last but not least I'm just used to using Tableviews in data entry projects. Using a Tableview for data entry or editing just comes 100% naturally to me (so don't ban me Erel ), plus these days I'm well versed in manipulating the Tableview at will without even thinking about it, I still have to think a lot about things when creating and manipulating CustomListviews in B4A and B4i which I do enjoy doing.

Even though when I create B4A and B4i projects I will only use CustomListviews, B4J projects are fundamentally different beasts altogether because most of the time they are highly paid projects doe clients, but I do intend on moving 100% over to CustomListviews in B4J in the near future. It's strange as when I look back at last years B4J projects, all of them use more CustomListviews than Tableviews per project, but currently I just prefer doing things this way.

Anyway yes I know there's 2 ways to calculate TAX, this is just one way so don't comment about it

Create an invoice template layout - Design #2


I hope that you like my latest create an invoice template layout - Design #2 (except for the buttons of course ), I just need to tweak the other layouts and I'll be set for future bespoke projects.

I hope that using pre-created easy to edit/change layouts will shorten development time in new projects when they come in. Obviously I will need to create new template layouts if a new project requires me to do so (I will just make a new template layout and then incorporate it into the project once completed), but these new basic but fully functioning template layouts should help me to complete projects faster than ever before.

BTW, if I create an invoice template layout - Design #3 (as I probably will), on the bottom left hand corner there will be a list of the selected customers previous invoices and their payment status (displayed using a CustomListview), plus buttons to add line spaces and manual text entry into the main form (NOT FOR SOLD PRODUCTS).



Enjoy...

 

[Mashiane]

This is really awesome, congrats!

 

[Peter Simpson]

This is really awesome, congrats!

Thank you @Mashiane but I wasn't quite feeling this layout or the other layouts. I woke up this morning with an idea about the buttons, so I changed their design in the css file and I also changed the header labels design too.

It now looks a lot better, all my layouts have been changed to match, but I still don't like the button designs even though they are better than before.

I want to get this correct now so that I don't have to mess around with it in the future.



Enjoy...

 

[LucaMs]

A - What do you mean with "template" (in this case)? A big layout (and css files)?
B - You mentioned CustomListView (I can't think of it as a data grid like TableView is); you might consider B4XTable.
C - I agree, the labels look better now (I like the buttons quite a lot).

 

[LucaMs]

C - I agree, the labels look better now

This would be even better - a kind of "closing" of the item/field, rounding also one side of the TextField.

P.S. You could round both sides, left and right, and then superimpose the Label on the TextField, so you won't have to create two kind of TextFields, LeftTextField and RightTextField.

 

[Indic Software]

Looking at the buttons at the top I feel they are using up lot of space and standing our like sore thumb, you should have only one button visible when user is Adding or Editing data and this the Save button. Rest of the buttons should be hidden and should show up (sliding out) only when use takes the mouse to a small button with 3 dots (...).

When the user is not in Add/Edit mode who New button here.

Also push all buttons towards the right side.

 

[Peter Simpson]

Looking at the buttons at the top I feel they are using up lot of space and standing our like sore thumb, you should have only one button visible when user is Adding or Editing data and this the Save button. Rest of the buttons should be hidden and should show up (sliding out) only when use takes the mouse to a small button with 3 dots (...).

When the user is not in Add/Edit mode who New button here.

Also push all buttons towards the right side.

Actually, when you are editing you only need 2 buttons, that code is already there but not active for obvious reasons (it's a template), the two buttons that are needed are save and cancel. All the buttons always show, but in final release of all of my products since the 90's the buttons become read only (greyed out) when not needed, the end user can never ever press the wrong buttons at the wrong time. It does not matter if I'm developing an Invoice, EPoS or CRM, Android, Windows or MacOS applications for clients, this is the norm for ALL bespoke packages.

And the buttons stay on the left, to me right hand side buttons just look absurdly ridiculous.

You are correct the buttons are using a lot of space, I've tried all sizes (including square). When creating my next new commissioned project in a couple of weeks time, I'll leave it up to the client what size buttons they want to see and in what order they want them in. Square buttons was nice but appeared too small, but wider buttons are well wide
Cheers for the feedback, but now it's time for a nice cold pint in the Solihull sun ?

 

[LucaMs]

Cheers for the feedback,

He doesn't care about my comment/feedback; worse for him ?

 

[rabbitBUSH]

Nice work Peter.

I still have to think a lot about things when creating and manipulating CustomListviews

One thing though : I agree with you 100% about using tableview. There is one basic reason for this, and, that is: the ability to put column headings onto a table. I am doing something at present and had a good look at xcustomlistview (as a result of your comments in #1) but its a lot of PT to get those column labels into the thing. So, I reckon, like you, I will be using tableview for some time to come.

I've been a great believer in using the appropriate element for any sort of UI layout/presentation.

Its probably a great deal easier to maintain down the line.

A question : the 5th navButton on the top (looks like greek column stucture) tooltip says "Pay invoice". I didn't expect that: because, this looks like an invoice that goes out to a client - which says that that button might display a list / info-block showing the unpaid invoices related to a particular client [ie. Avery Cafe 18]. It appeared briefly so maybe I am recalling it incorrectly.

Just had another quick look at the video : in accounting terms "Post Invoice" means enter it into the book-keeping records system. Does that buttom mean "Mail" invoice (as in the invoice has been sent / emailed)?

 

[LucaMs]

One thing though : I agree with you 100% about using tableview. There is one basic reason for this, and, that is: the ability to put column headings onto a table. I am doing something at present and had a good look at xcustomlistview (as a result of your comments in #1) but its a lot of PT to get those column labels into the thing. So, I reckon, like you, I will be using tableview for some time to come.

There is also this @Star-Dust's grid, which seems to be powerful (i haven't tried it yet but i hope to do so soon).

 

[William Lancee]

It is simply to add headers to a CLV table, I create a panel that is positioned above the CLV and then load it with the labels.
The label above that has the title. The CLV itself is unencumbered. The items in the CLV are rows of labels.

    Dim headersX As B4XView = Headers
    Dim w As Float = .98 * CustomListView1.GetBase.Width / fields.Length
    For i = 0 To fields.Length - 1
        Dim lab As Label: lab.Initialize("header")
        Dim labx As B4XView = lab
        labx.Tag = i
        labx.SetTextAlignment("TOP", "CENTER")
        labx.Font = xui.CreateDefaultBoldFont(18)
        labx.Text = fields(i)
        headersX.addView(lab, i * w, 0, w - 2, 48dip)
    Next

 

[LucaMs]

One of the problems with any of those solutions (TableView, CLV, B4XTable) is giving the user the ability to resize the width of the columns (and their headers).

 

[William Lancee]

This is my code for loading the item panels. You'll see that the width of each column is determined by w.
In my example the columns are all the same size, but they can easily be set differently for each column. The same for the headers.

In CLV the items are loaded when they become visible, so if the user has a path to determine the width they can.

        Dim pnl As B4XView = xui.CreatePanel("")
        item.Panel.AddView(pnl, 0, 0, item.Panel.Width, item.Panel.Height)
        Dim w As Float = .98 * item.Panel.Width / fields.Length
        For j = 0 To fields.Length - 1
            Dim lab As Label: lab.Initialize("Cell")
            Dim labx As B4XView = lab
            labx.Tag = j
            labx.SetColorAndBorder(xui.Color_RGB(225, 225, 255), 0, 0, 0)
            labx.TextSize = 15
            If j = selectedField Then
                labx.SetColorAndBorder(xui.Color_RGB(200, 200, 255), 0, 0, 0)
                labx.TextSize = 17
            End If

            If fieldAligns(j) = "Right" Then
                labx.SetTextAlignment("CENTER", "RIGHT")
                labx.Text = items(j) & "   "
            Else If fieldAligns(j) = "Left" Then
                labx.SetTextAlignment("CENTER", "LEFT")
                labx.Text = "   " & items(j)
            Else
                labx.SetTextAlignment("CENTER", "CENTER")
                labx.Text = items(j)
            End If
            pnl.addView(lab, j * w, 0, w - 2, 48dip)

In any case, as usual we getting off topic. Best wishes for @Peter Simpson.

 

[LucaMs]

In my example the columns are all the same size, but they can easily be set differently for each column. The same for the headers.

is giving the user the ability to resize the width of the columns

 

[LucaMs]

One of the problems with any of those solutions (TableView, CLV, B4XTable) is giving the user the ability to resize the width of the columns (and their headers).

I probably remember wrong. I thik that TableView allows the user to resize the width of the columns (the fact is that in one of my SWs I wanted to prevent this, which is slightly different ?).

 

[Peter Simpson]

Good morning @William-Zenyth and @rabbitBUSH,
Below is just one of the auto generating headers routines(using the row layout as the template) for customlistviews that popped into my head, it's pretty simple code really. My older version was just for B4J but the code below should work on B4A, B4J and B4i..

1. All one has to do is to add a header panel above the main customlistview in the designer layout and declare it as 'Private PanHeader As B4XView'.
2. In the 'HeaderTitles()' below add ALL your column names used in your customlistview (even if columns are empty).
3. Call BuildHeader in your initialization sub, your headers will appear above the customlistview.

The code below is the newly updated code that I use to automatically generate the customlistview header and center the text, you can also enable/disable the header divider lines.

Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainCLV")

    BuildHeaderAutomatically (Array As String ("No", "Description", "Button")) 'Add your list of header titles(One header per column views) including blanks here
End Sub

'BUILD HEADER AUTOMATICALLY
Sub BuildHeaderAutomatically(HeaderTitles() As String)
    Dim AddDividers As Boolean = True
    Dim LblHeader, LblDivider As Label

    PanHeader.LoadLayout("ItemRow") 'Load your row layout template - Needed to know how many views there are per row

    For i = 0 To HeaderTitles.Length - 1 'Adjust to suite
        PanHeader.GetView(i).Visible = False
        LblHeader.Initialize(Null)
        LblHeader.Text = HeaderTitles(i)
        LblHeader.As(B4XView).Font = XUI.CreateDefaultBoldFont(15)
        LblHeader.As(B4XView).SetTextAlignment("CENTER", "CENTER")

        PanHeader.AddView(LblHeader, IIf(HeaderTitles.Length - 1 = i, IIf(XUI.IsB4J, PanHeader.GetView(i).Left - 20dip, PanHeader.GetView(i).Left), PanHeader.GetView(i).Left), 0dip, PanHeader.GetView(i).Width, PanHeader.Height)

        If AddDividers Then 'Routine to add header column dividers.
            LblDivider.Initialize(Null)
            LblDivider.As(B4XView).SetColorAndBorder(XUI.Color_RGB(217, 217, 217), 0dip, XUI.Color_RGB(217, 217, 217), 0dip)
          
            Dim Left As Int = PanHeader.GetView(i).Left + PanHeader.GetView(i).Width
            If XUI.IsB4J Then Left = IIf(HeaderTitles.Length - 1 = i Or HeaderTitles.Length - 2 = i, PanHeader.GetView(i).Left - 20dip, PanHeader.GetView(i).Left) + PanHeader.GetView(i).Width
            PanHeader.AddView(LblDivider, Left, 0dip, 2dip, PanHeader.Height)
        End If
    Next
End Sub

PLEASE NOTE: I'm currently playing about with As inline casting Types and learning it's best uses, especially for shorter and easier to manage code. The code above is probably NOT the final version but it does work in B4A, B4J and also B4i. At a later date I'll change and release the final code for auto generating customlistview headers.

Example of customlistview with auto generated headers

Just add a panel above the customlistview in the designer

Enjoy...

 

[rabbitBUSH]

All of that versus a table view property that says Column Headings.....and it's done.....give a number of columns etc.

Column resize should be in the programing....but that's another question.

 

[Peter Simpson]

All of that versus a table view property that says Column Headings.....and it's done.....give a number of columns etc.

Column resize should be in the programing....but that's another question.

All of that versus a table view property that says Column Headings.....and it's done.....give a number of columns etc.

So you want customlistview to be even more complicated than it already is???

Column resize should be in the programing....but that's another question.

Okay, in both @William Lancee and my own solutions (which I will change to cover B4A, B4J and B4i) all you have to do is to add a few extra lines of code and the columns are generated automatically for you. I understand that it would be nice to have customlistview create the header column, but you also need to understand that it's called a customlistview for a reason, you can customise the view as much as you want or need to. Normal listviews are good but they really are just lists and not really that customisable.

I really do like using Tableview simply because I'm just making a simple editable table/list, so I do prefer Tableview for that. But with a Customlistview one can really go to town with creating and customising things likes cards, multiline lists, offset lists, image lists etc etc etc, the list just goes on and on and on.

I can see why customlistview does not have a header row, and it does make 100% sense to me and it's not really necessary or even needed, especially with @William Lancee solution.


Enjoy...

 

[rabbitBUSH]

customlistview does not have a header row, and it does make 100% sense

fair enough - i thought you had said some other things when i looked earlier - this makes sense - but still table views will still have a place - its really about line one #9 though - I think I led this off the point - apologies folks.

 

[Peter Simpson]

fair enough - i thought you had said some other things when i looked earlier - this makes sense - but still table views will still have a place - its really about line one #9 though - I think I led this off the point - apologies folks.

No apologies necessary, this is a great open forum where proactive discussions (without malice or prejudices) are more than welcome Mr @rabbitBUSH ?

At first I did used to think a bit like yourself in that regard, but later when I started to use customlistviews for other things like cards, that's when I realised the true power of the force, oops I mean custonlistviews

But for ease of use and quickness of setup Tableview is definitely easier (imho) but saying that I have my codebase setup to make views like Tableview quick to setup and use as I'm creating a desktop application and nothing else.

But as Erel has mentioned countless amount of times in multiple threads, if need be one can mix and match B4XViews with native views with ease in projects....