How to use Radio Buttons in a PDF creation

What I’m trying to do:
I’m trying to use radio buttons in the creation of a PDF
What I’ve tried and what’s not working:
I’ve tried several things - I wish the PDF tutorial demonstrated the use of RadioButtons
image
I have two options and I need the user to select one
It’s an application form so from the PDF tutorial I’m doing the
ON THE APPLICATION ON THE APPLICATION-FORM
self.firstName_label.text = firstName firstName = self.firstName_box.text

but for the radio buttons, how should this work

Anvil renders a PDF using a headless Chrome running on the server side.
If you render a form on your pc on Chrome, then print it to PDF, you get the same result as the PDF generation on the server side.
As far as I know, Chrome is not able to generate a PDF with radio buttons and other input elements, so Anvil can’t either.

Thank you @stefano.menci, so let me get this right as I’m still grasping things here, so you’re saying that Anvil renders PDFs in a headless Chrome environment on the server-side.
because of this, it’s the same as if I were to go into the Chrome browser go to the three dots in the top right-hand corner and select Print… then change my Destination to “save as PDF” and click the save button.
That this operation in bold is equivalent to what Anvil is doing on the server-side? :thinking: I really don’t think this is what you are trying to tell me .

I’m just trying to pass the data from the ApplicationForm<-which captured the user inputs and pass it to the Application itself.

I can pass name = textbox_name.text to → label_name.text = name
but how do we pass the selected option in a radioGroup

it seems practical to accomplish

Yes, that’s how it works.

Most apps have input forms to collect data from the users and store the data in the database.

They also have forms that allow the users to select something (a session, an order, a something that has been stored in the database by the input form) and print it. Printing something means creating a form that shows that something, then rendering that form with the PDF renderer rather than with the client.

When you say use radio button in a PDF, which one of the following do you mean?

  1. Add a radio button on the PDF so the user can download the PDF, click on the radio button, upload it back and get the app to read the input from the PDF
  2. Add a radio button to the PDF that looks like a radio button, but does not work like a radio button, it’s just printed
  3. Add the information to the PDF about which radio button was selected

I think that 1. is possible, but I would stay away from it.
I think that 2. is possible, but ugly (personal opinion, there could be good reason to do this).
I think that 3. is the right thing to do. But you don’t really show the radio button, you show the information described by the radio button. For example if your input form has radio buttons like this:

image

I would render a simple label like this in the PDF:

image

1 Like

Thank you again @stefano.menci - I guess I’m being anal with my situation as I have a paper application that I’m trying to reproduce with all its details. Presently the processes are all good old-fashioned paper and pencil. Members fill out a paper application and we literally take a picture of it and send it to our google-drive in a folder identified as “APPLICATIONS” we’re in 2022 and this is silly.

Now on me being anal the actual paper application has a rectangular box with two choices
[o] Married [o] Single

I was hoping that upon submitting the applicationForm the rendering would also produce “really display” the rectangular box with
[o] Married [o] Single ← but Selected

At the moment I’m producing the pdf with a dropdown passing over the selected_value to the create_pdf process in essence what I have is this:

APPLICATIONFORM
livingStatus = self.livingStatus_dropdown.selected_value
to →
APPLICATION
self.livingStatus_label.text = livingStatus

In short, it’s number 3 but by showing the radio button options as well, I guess if I really want to use the radio options and give up on trying to display the rectangular box I could as you did in your example I have to figure out how you did it. :smile_cat: care to share

My other issues

  • I have to figure out how to place a background image to the APPLICATION once rendered.
  • have every field in rectangular boxes as now they are floating on the paper
  • the pdf prints on two sheets instead of one
    :frowning_face: Welcome to my world :frowning_face: Hey thank you so much for your time on this

You can do this by adding radio buttons or checkboxes to the form that you will render.
When you use a radio button in input, you get its value with is_married = self.radio_married.selected or you set it with self.radio_married.selected = is_married (you could use the group value to read, I don’t think you can use it to write).

Good practice in UI design is to use circular radio buttons when you pick one choice out of a group (you are either married or single) and square check boxes when you have a multiple choices (you can be none, some or all of single, looking for job, with children).

So in a single/married selection you should have a round radio button, but nothing prevents you from using two checkboxes, (or from being masochistic and playing with CSS and getting the radio buttons to look like checkboxes).

You can edit theme.css and use the background-image to add a background image to a DOM element. You can google it to get a few examples out there. You could use an image from any web site, or you could add the image as an app asset.

You could put the radio buttons inside a column panel and set its role to card or its border property to solid. Or you could put them inside any kind of container and play with its border properties.

You could play with the spacing_above and spacing_below properties in the layout panel of each element in the printed form. If this is not enough, you may need to play with the CSS to decrease padding and margins. How far are you from getting all to fit inside one page?

1 Like

@stefano.menci I’m going crazy with these radio buttons - I’ve several ways to do a simple grab and pass of this radion it just did not work for me - it seems so simple to do as you wrote it no luck . doing this:
livingStatus = self.radio_button_married.value and then self.livingStatus_lable.text = livingStatus

I ended up placing the radios in a flowPanel n design view

then in code view the following:
image

Which then passes to the actual ticket:
image

image

:frowning_face:
If you feel like showing me how it’s done
https://anvil.works/build#clone:Y3EKNAUKQURWKVMZ=2Y7BJLNMFRKBBQXLQDCK5HYG

moving to the next problem - hell and I still have to figure RoleBaseAuth just dandy :crazy_face:

Perhaps you could try using Radio buttons on the web app and then the Anvil checkbox on the form as @stefano.menci suggested, with a twist of sending a dictionary key representing the selected radio button to check the appropriate box on the PDF form.

I mocked up that approach in the Clone link below (Form1 is the Web App and Form2 is the PDF)

https://anvil.works/build#clone:XTZ56KJVESX6PL6M=QLNL6B5RA2TVAKZOOG6NIBBP

Sorry if that’s more confusing and/or redundant than helpful.

2 Likes