Printing to an index card

[Gillian_Durham]

Hello, I am completely new to this and am hitting a few walls. One I want to print a cage card listing animal details within an html component.

1. I cant seem to get the html to pull in data even with curly brackets.

2. I tried to set up a code to download the file.

screen shot attached.

[Gillian_Durham]

here it my html for the component:

Index Card @page { size: 5in 3in; /* Set page size to 5x3 index card */ margin: 0; /* Remove default margin */ } body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .index-card { width: 5in; /* Ensure card fills entire page */ height: 3in; /* Ensure card fills entire page */ background-color: white; border: 1px solid black; padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; page-break-inside: avoid; /* Prevent page break inside the card */ } .header { font-size: 14px; font-weight: bold; margin-bottom: 10px; } .field { margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; /* Align items vertically */ } .circle { width: 15px; height: 15px; border-radius: 50%; border: 1px solid black; display: inline-block; margin-right: 5px; } .notes { margin-top: 10px; border-top: 1px solid black; padding-top: 5px; } .right-align { text-align: right; } .blue { color: blue; } .red { color: red; }

Nest ID: {{ cageInventory.selectedRow.data.NestID }} Location: {{ cageInventory.selectedRow.data.LocationCode }}

Set-up Date: {{ cageInventory.selectedRow.data.SetupDate }} / Expiry Date: {{ cageInventory.selectedRow.data.ExpiryDate }}

Male: {{ cageInventory.selectedRow.data.Male }} (Hatch Date: {{ cageInventory.selectedRow.data.HatchDate }} / Genotype: {{ cageInventory.selectedRow.data.Genotype }} / Color: {{ cageInventory.selectedRow.data.Color }})

Female: {{ cageInventory.selectedRow.data.Female }} (Hatch Date: {{ cageInventory.selectedRow.data.HatchDate }} / Genotype: {{ cageInventory.selectedRow.data.Genotype }} / Color: {{ cageInventory.selectedRow.data.Color }})

Function (Circle): Breeding / Egg Collection

Offspring Band Colors:

Notes:

Generate PDF document.getElementById('print-button').addEventListener('click', function() { const { jsPDF } = window.jspdf; const doc = new jsPDF({ orientation: 'landscape', // Set orientation to landscape unit: 'in', format: [5, 3] // Set format to 5x3 inches });

        // Capture the HTML content of the index card
        const content = document.getElementById('index-card').innerHTML;

        // Add HTML content to the PDF
        doc.html(content, {
            callback: function (doc) {
                doc.save('index-card.pdf'); // Save the PDF with a specific filename
            },
            x: 0.5, // Add margin if needed
            y: 0.5
        });
    });
</script>

[Tess]

Welcome, @Gillian_Durham! This could be a good app to take a look at in office hours, if you're interested!

What type of component is cageInventory? The Mobile product doesn't have a table component, so you may need to remove .selectedRow.data from your dynamic references. You can use the state tab to see what properties are available.

Where are you putting the css? The mobile html component doesn't support CSS classes, so styling would need to be in-line:

If cageInventory was a query that returns a single object, you could do something like this:

The download utility expects the following params:

This post might be helpful.