Smartstaff, administrator
3,315
edits
Changes
→Styling XML Data for Printing
# Sections must contain 8 or less columns to render properly and be usable.
===Styling XML Advanced Data Table for Converting to PDF and Printing===You can print your XML if you are Advanced Data Table content by displaying it in a '''Read Only - System VariableDisplay Text and Variables'''custom field. Size your your XML In order to do this the content must fit within 700 pixels wide (portrait) or 900 pixels wide (landscape) to avoid otherwise content cutting will cut off, when a PDF is generated. If you have more than one section and more than a few columns, some of your To ensure content may does not cut off when printed if it is not sized. You will also notice and to ensure columns between sections do not align. To fix this, we will use CSS in a SmartFolder and amend our '''Read Only - System Variable''', which is displaying the XML information. Wrap the content in your read only system variable with a div Display Text and give the div a class. We do this to control the width. Wrap the section syntax in a div and give it a class. We do this so we can control the size of cells and the fonts. e.g. <div class="xml700"><div class="xmlTitleBar">Title Bar Name</div><div class="xml3col">@xml.fieldname.sectionnodename.html@</div></div>Now create a CSS file. e.g. <pre>@charset "utf-8";/* CSS Document */.LeftAlign {text-align:left;}.RightAlign {text-align:right;}.xml700 {width:700px;}.xml3col .xmlLabel {width:470px; min-width:470px; max-width:470px;}.xml3col .xmlCell {width:80px; min-width:80px; max-width:80px;}.xml3col .xmlCell.note {width:150px; min-width:150px; max-width:150px;} </pre> Go to the desired SmartFolders and upload your CSS file. Use '''View URL''' to get the path to the CSS file. Then add the relative link back into your '''Read Only - System Variable'Variables''. e.g. Add the class '''RightAlign''' to the desired cells in the section builder.If you want to make one cell larger than the others, add a custom class to that cell in the section builder e.g. <pre>.xml3col .xmlCell.note {width:150px; min-width:150px; max-width:150px; font-size:12px}</pre> I can add '''note''' to a cell that has xmlCell in a section wrapped in a div with a class '''xml3col''' and that cell will become 150 pixels wide. Note: your cells must add up to 700 pixels if you are displaying your budget in a portrait PDF on letter size paper (8.5 x 11”)field.
# Navigate to the desired '''Display Text and Variables'''.
# Paste the contents of '''display.html''' into the '''Content''' section of the field.
# update the href to point to the relative path to the file called '''xml-print.css''' that you uploaded to the SmartFolders.
# Add your desired variable example '''@xml.Budget.Expenses.html@''' inside the div with the '''class="xml8col"'''.
# Change the '''8''' in '''class="xml8col"''' to the number of columns in your section. Note you must have 8 or less columns.
# Save your custom field
You now have a version of your Advanced Data Table that you can display on the object such as the level 1 application and you can convert this to a PDF using the Web Page View custom field.
===Using different styles for Print and Web with XML Data===
