Using display:none in HTML templates

[mjb2000]

I am trying to build some conditional logic in a HTML printer template.

I have found using:
[='{PAYMENT TOTAL}' ? '<tr><td style="font-weight:bold">You paid some money<td></tr>' : ''] does not work reliably, I think due to issues of escaping quotation marks…

Anyway… I tried to get around this by using conditional logic to change the display: style attribute of the <tr> element. However it seems that SambaPOS does not respect this style, and still shows the row.

I noticed that <div style="display:none"> is respected.

Is it possible to update the code so that <tr> and <td> elements respect display:none?

It would be great if <tr> and <td> could also respect background: border: and border-color: which right now are respected by <div> but not other elements.

[VehbiEmiroglu]

Of course SambaPOS doesnt render the display:none attribute. But we can think about other tags.

[mjb2000]

Hi @VehbiEmiroglu - I don’t understand your response. Can you please clarify what you mean.

When I say “it is not respect” display:none, what I mean is that it does not respect the command to hide the element and actually DOES render the element. I would like SambaPOS NOT to render elements with display:none.

For example:

<div>Show me</div>
<div style="display:none">Hide me</div>

Renders correctly as:

Show me

BUT

<table>
<tr><td>Show1</td><td>Show2</td></tr>
<tr style="display:none"><td>Hide1</td><td>Hide2</td></tr>
<tr><td style="display:none">Hide3</td><td style="display:none">Hide4</td></tr>
</table>

Renders incorrectly as:

Show1   Show2
Hide1   Hide2
Hide3   Hide4

Can you see what I mean about the command to hide those TR and TD elements is not being respected?

[mjb2000]

Actually… Maybe I am wrong…

I just double checked and actually even with DIV’s display:none is ignored…

Is there any way to hide elements in a HTML template?

[Jesse]

Yes I do it. I will share it when I can . I use ternary

[mjb2000]

Do you wrap all of your HTML inside the temary?

I am currently doing this, but it does look a little messy…

[='{NOTE}' ? '<div style="font-family:cursive;border:1;border-color:black;padding:4px 6px;"><span style="font-size:15px;">&#9998;</span>{CALL:tkt.newLines("{NOTE}")}</div>' : '']

[markjw]

The implementation of HTML used in HTML Template is not true HTML, you don’t get full HTML functionality. It basically takes the HTML code you enter and maps it into XAML which is used to generate the printer template. If you want better control, I suggest you use Document Printer and XAML format, it is similar in structure to HTML and there is lots of info about it online.

AFAIK in HTML template format most CSS styles won’t work, so that includes display:none.

EDIT: Actually many CSS styles work, I just haven’t used HTML templates for quite some time as I prefer XAML for better control. But still not display:none.

You can find details about Document Printer near the top of this topic:

SambaPOS 5.1.54 Release

Download Link. http://sambapos.com/?wpfb_dl=135 Here are new features that comes with 5.1.54 release. ###Displaying duration on table buttons {ENTITY STATE MINUTES} tag implemented for displaying time passed on table buttons. Here is a sample display format that used New Orders table state. New Orders state enables when we create a new ticket for a table and it changes table color to orange. $1<br/> <color White>${REPORT TICKET DETAILS:T.RemainingAmount:(TEN.Table=$…

However most importantly, your conditional statement is incorrect, and this is why it is not working.

@mjb2000

[=‘{PAYMENT TOTAL}’ ? ‘<tr><td style=“font-weight:bold”>You paid some money<td></tr>’ : ‘’]

You are using a “ternary operator” and it needs to be

[='Condition to test' ? 'Value if True' : 'Value if False']

So this part '{PAYMENT TOTAL}' is invalud. It needs to return True or False, but all you are doing is testing against a string value of {PAYMENT TOTAL} which will give unexpected results if even work at all.

What you really need is something like this:

[=TN('{PAYMENT TOTAL}') > 0 ? '<tr><td style="font-weight:bold">You paid some money<td></tr>' : '']

TN('{PAYMENT TOTAL}') > 0 is using the TN() function to convert {PAYMENT TOTAL} to a number and then we are checking if the number is greater than 0.

[mjb2000]

Thanks @markjw… I will look in to the document printer, and thanks for the tip on how the logic works… I naively thought that it was checking for the presence of any value, not a true/false… I will update the similar statements I am using.

[markjw]

Also there is a new HTML template added by default in recent releases.

Just create a new Printer Template, then click Load and select “Ticket Template (HTML)”. That will give you good starting point for an HTML template.

[mjb2000]

Yep cheers. I found that I was using some of the ideas in to base my new template on. In particular how you must not specicity “px” in border widths and use align=right as an attribute a

rather than using text-align:right

[VehbiEmiroglu]

I think @markjw gives the answer