With this code:

"""
<div id="test"></div>
<script>
  document.getElementById("test").innerHTML = {}
</script>
""".format(NOW())

nothing is rendered, and datetime is not definederror appears the browser’s console. This page showcases the problem.

Hello,

I am trying to adjust the column width on PDF view. It changed within Grist, but not on the PDF.

Can you please help me.

.DateWidth{width:12%; -webkit-print-color-adjust: exact !important; color-adjust: exact !important;} .BilledWidth{width:17%; -webkit-print-color-adjust: exact !important; color-adjust: exact !important;}

<tr> <th class="DateWidth">Date</th> <th>Service</th> <th>Description</th> <th class="BilledWidth">Billed By</th> <th class="money">Rate</th> <th class="number">Qty</th> <th class="money">Amount</th> </tr>

When using custom widgets with HTTPS served custom grist instance it becomes visible that there are http requests send which cause the iframe of the widget to stay white and chrome console gives following error:

Mixed Content: The page at 'https://<mygristinstance>/XXXXXXXXXX/Untitled-document2' was loaded over HTTPS, 
but requested an insecure frame 'http://<mygristinstance>/widgets/markdown/?access=none&readonly=false'. 
This request has been blocked; the content must be served over HTTPS.

I noticed that behavior for multiple widgets.

I tried to track it down, but calling https://<mygristinstance>/widgets/markdown shows that the widget itself is served via HTTPS.

• Debugged grist-core around WidgetFrame.ts with chrome and source map and searched for http in variables, found nothing
• Searching for http:// in this repo and checking paths did not help

When running grist only on HTTP the markdown editor from the same URL works fine.

It seems to make no difference whether the widget is used via custom url or via configured widget repository with GRIST_WIDGET_LIST_URL.

Hello,

This might be a stupid question, so sorry in advance.

I have added my own css to customize the look, however it is not showing up when I hit the Print button.

Can you please tell, do I need to add something to the invoice.js file or do you know why the css is not carrying forward?

The first part should have green and the button has no styling.

My CSS

Thank you

Following up this issue: gristlabs/grist-core#528

A contribution guide would help to welcome more contributions to the widget and help people to create their own.

Hello,

I am trying to add another section called Trust Balance. I copied the Note example. However now the invoice is not showing up.

Here is the code I added.

Index.html

invoice.js
function addDemo(row) { if (!row.Issued && !row.Due) { for (const key of ['Number', 'Issued', 'Due', 'Matter']) { if (!row[key]) { row[key] = key; } } for (const key of ['Subtotal', 'LateFee', 'Taxes', 'Total']) { if (!(key in row)) { row[key] = key; } } if (!('Note' in row)) { row.Note = '(Anything in a Note column goes here)'; } } if (!('TrustBal' in row)) { row.TrustBal = '(Trust Balance goes here)'; } }

Hello,

I recently added your updated code for the invoice.js. You provided this:
row.Total = row.Subtotal + (row.Taxes || 0) - (row.Deduction || 0);

However, I need for this to multiply a fee charge. Here is the code I have, but it is not appearing correctly on the invoice.
addDemo(row); if (!row.Subtotal && !row.Total && row.Items && Array.isArray(row.Items)) { try { row.Subtotal = row.Items.reduce((a, b) => a + b.Rate * b.Qty, 0); row.Total = row.Subtotal; row.Total = row.Subtotal * (row.Taxes || 0) - (row.Deduction || 0); } catch (e) { console.error(e); } }

Can you please advise me how to calculate the row.Taxes (Fees) and then subtract the row.Deduction (Trust Fund).

Thank you

Hello,

I have no idea if this is possible, but really hoping so.

Within the custom invoice (index.html), I created a pay now button. Within the URL it looks like this
<div class="footer"> <p class="PayInfo">Please click on the button below to make your payment today.</p> <div class="PayBTN"><a href="https://uslawpros.com/client-payments/?invoice={{ invoice.Number }}&client={{ business }}"><button>Pay Now</button></a></div> <div class="thanks"> Thank you! </div> </div>

I call these merge tags, and it pulls in the content. However, it is not pulling in the content.
This is the results

Is there a way to pull in the data into this URL, so when the client clicks on the button, it automatically fills in the information for them?

Thank you

P.S. I just noticed the Invoice number is missing.

Quill/delta format is not standard, therefore it is hard to reuse in other contexts.

Exporting directly to HTML would allow easy read to the already existing easy write feature allowed by the notepad widget.

This reposity seems to be a great resource for Grist!

However it's not so obvious to be aware of all the work done here and which component does what.

Some proposals could be either:

• having a list of the widgets with a tiny description
• present a screenshot of the widget within a context
• …