Tricky 'hide group' issue


This isn’t high priority and may in fact not be possible (or possibly too complicated). Anyway, I thought it’s worth asking in case it’s easier than I think!

My users can click a Preview button in my invoicing app to view a newly created invoice. The invoice data is held on a page called ‘html-invoice’, but because I have a single page app I simply display ‘html-invoice’ inside an iframe on the main index page. There is a reason for doing this but not important for this post.

When a user sends the invoice to their customers email, the customer clicks a link and goes to a different full width page called ‘view-invoice’. This page is identical to ‘view-invoice’ but it has a ‘Print PDF’ button at the top so that the customer can print it out.

Here’s my question;

I would (ideally) like to only use ‘view-invoice’ for both preview and final customer view (for simplicity) but there is two issues;

I 1. need to only show the the ‘Print PDF’ button if the customer comes from the email link (don’t show button on user Preview).
2. Since ‘view-invoice’ is displayed in an iframe, can I even make use of Bubble’s Hide funtion?

Hi, some ideas…

Create a yes/no custom state, and on page load, set the value of it based on whether the URL is the email link. Then you can set the Print PDF button to show/hide based on the value of that custom state.

Separately, I had the general impression that iframes are best avoided. Could you instead create the invoice as a reusable element? For the view and print invoice page, put the element on that page. And for the preview, put the element in a popup?

Thanks, this is a good idea but I am unsure how to set the value based on whether the URL is the email link. I send the following info to Sendgrid when a user clicks ‘Send’ to send an invoice to the customer.

You can see the link points to view-invoice but how would I include the yes/no custom state?

This is a sore topic because I spent weeks trying this!

Basically it can’t be done because I want a user on a mobile to see a small (proportioned) version of the regular A4 invoice. Since my whole site is narrow, 650px wide, I needed to process the invoice on a separate wider page and display it on the thinner preview page. The only way which may have worked would be to generate a pdf (on a wide page) and show that on the the smaller 650px wide preview page but I never worked out how to do this. In fairness, the iframe seems to be working a treat and is beautifully scalable.

Do a “When page is loaded” workflow that sets the custom state to “yes”. In the “Only when” box, put in a condition that sees if something is in the page URL.

1 Like