[Enhancement] Improve Print Application formatting

[patrickm02L]

See - Create a digital version of the current paper application

Description

When were testing with Mobility Services team on 5/9/24 we noticed that the formatting for the Print was breaking in weird places, and want to figure out how to make improvements to display the printed form better.

• [x] Add “Attachment Date” to Section 3
• [x] Put print notarization language blurb needs as page break at the bottom for the page
• [x] Need legal “Must include Add Page X of Max page” in legal printing

Notes

via Diana

• Experiment on longer responses on Background Information
• Notary part on it’s own page (Page 4 of 4)

Propose

• Set character count for Background Information (paragraph text type) for applicant
  • edit app page - 'view_100'
  • background info page - 'view_83'
  • field IDs of paragraph text 48, 49, 52, 53, 76, 86, 56
  • character limit is currently set to 500 but can be changed
  • HTML changes to bold/red over limit when above char limit
  • Currently no validation rules set (to test how much)
  • Ask stakeholders how long should each section be when first fill out

[dianamartin]

5/14/2024

• Susanne and I synced on the Print Preview page enhancements
• I used the 500 character limit for response entries and was able to make it look pretty good at 100% scale, but we don't think that all users will use a full 500 character.
• Will need to test with minimal form responses

[susannegov]

I found this for forcing page breaks when printing: in the Rich Text view wrap it with <div style="page-break-before: always;"> YOUR CONTENT </div> Source: https://forums.knack.com/t/add-page-break-to-use-in-the-print-link/9724/10 Confirm it works for chrome at least

[susannegov]

• [x] Added Header Rich Text after every print page <div style="page-break-before: always;"> HEADER </div>
• [x] Page break for Section 1
• [x] Broke up Section 2 into two pages
• [x] Page Break Section 3
• [x] Modified table view to custom for print view
• [x] Page Break for page 4
• [x] Added Uploaded Date and Uploaded By

To do

• [x] Add “Uploaded Date” to Section 3
• [x] Set record rules for Uploaded By and Uploaded Date when attaching documents
• [x] Must include Add Page X of Max page in legal printing

[susannegov]

• [x] Split last question of Section 2 to page 4
• [x] Forced into format of 4 pages
  • Tested with 500 character limit on all answers: print link
  • [x] Tested with all answers selected No in BG Info: print link
• [x] Footer issue at page 3?

[susannegov]

Met up with Diana. We moved the page number from footer to below the header to keep the page numbering position consistent

• [x] Added field LengthDescriptionFields Text formula
  • This will give a character count of all paragraph text for the applicant
• [x] Added CountDescriptionLength numeric type with conditional rule to text formula
• [x] Added Print menu for 3 pages vs 4 pages
• [x] Added page rules based on CountDescriptionLength < 300

To do

• I might need to separate the text formula of multiple paragraph text for length because it pads the character count when combining (oh paragrapht text has a bunch of whitespace when combining 🤔 )
• [x] Fixed it by using length(trim(FIELD)trim(FIELD)....

  length(trim({Description for Convicted of crimes})trim({Description for Convicted of other crimes})trim({Description for Is presently under indictment})trim({Description for Has Driver License suspended or revoked})trim({Description for Has Traffic Violation})trim({Description of moving violation})trim({Description of driver experience}))

[susannegov]

• [x] Modified Signature Date and Signature By to match PDF
• [x] Added print trigger buttons - the button is hidden using CSS

  @media print {
  #view_225 {
  display:none;
  }
  #view_226 {
  display:none;
  }
  }

[susannegov]

• [x] Changed it from detail buttons to menu buttons in js. no CSS needed since menu buttons are hidden in print preview by default

[susannegov]

• Added mobile friendly detail label CSS from gitbook
  • 60% for app information
  • 80% for background info (mostly yes/no) for left label align
• Page break HTML doesn't work for iOS mobile when testing on device -maybe separate issue 😭

[patrickm02L]

5/31/24

From yesterday's Sprint Review we noticed that the address needs to be updated. Please change to the following then close out.

Mobility Services 1501 Toomey Road Austin, TX 78704 512-974-7857

[susannegov]

06/07

• Added updated text
• Made page counter dynamic and updated html/css
• There was a visual bug where the detail view would get overlay on the 3 page print (4 page print wasn't affected as far as I know)
  • Solved by adding below
  • #kn-scene_65 .view-group, #kn-scene_83 .view-group { display: block;}
  • Knack has a built-in css class called view-group where the views get grouped up set to flex which is why text overlap happens, but the view-group class I'm not sure what it is determined by.