How do I show a multiple line Salesforce addresses in a single form field using v2 components?
I am converting a v1 page to v2. With v1, the consultant successfully used a template field to display the billing address of an account. An example of the template text is “{{BillingStreet}}<br/>{{BillingCity}}, {{{BillingStateCode}}} {{BillingPostalCode}}”. The same template field in V2, does not allow me to select the AllowHTML check box causing Skuid to print the HTML breaks as normal text. Even if I set allowhtml to true manually in the XML editor, Skuid still ignores does not render the breaks.
Using the BillingAddress as a single field in the form doesn’t help at all. It shows on the screen with the text “iobject Object]”
Any suggestions on how to do this in v2 without having to create multiple fields?
I have attached a Skuid Page that has a form with the example template and Billing Address field.
Page 1 / 1
Hi @dnadrop,
You should be able to accomplish this with or without the “Allow HTML” in V2.
Template fields in V2 are able to access carriage returns (simply pressing enter/return) directly in the code editor input. Here’s a quick example of my template field in a V2 form without Allow HTML checked:
Field PropertiesExpanded inline code after clicking the </> icon in field properties
And here’s what this looks like in runtime:
**Don’t forget to add spaces between your merge fields**
I hope this is helpful, have an excellent rest of your week/weekend!
Hi @dnadrop Has this response helped answer your question?
Not totally. It worked for the test case that I gave. When I put the solution in the actual Skuid page and extended the template to include conditional statements, there were no multiple lines. When I have more time, I will post again with a scenario that does not work. The actual page is quite large, complex, and company-specific. I can’t post that one.
Thank you @Justin_Campbell for your reply. It was helpful to learn more about the template field and what I do or don’t need to include in them.
The problem occurs only with the Lightning Design System. Use the attachment to test.
Does anyone know what in the design system would cause it to ignore line breaks?
I am incorporating my Skuid pages into Lightning App pages. I want to use the Lightning Design System so that my Skuid pages would blend in the best.
Does anyone have another Design System that mimics the Lightning Design that will not ignore line breaks?
Hi @dnadrop ,
I did some digging on this and found a solution. The included out of the box LightningDesign System explicitly has a “nowrap” rule applied to whitespace assigned to fields. Here are a few quick and easy steps to solve this:
Out of the box Design Systems are not editable in Skuid, but we include a feature to use any of these base Design Systems as a starting point when you create a new one:
Navigate to “Design Systems” in the Skuid admin
Select “Create” and then name your new Design System Clone
Finally, select the “Lightning” Design System to clone styles from:
This will take all of the same styles and use that as a base for your newly cloned Design System.
Open your new design system and find the “Field” component. From there simply click “Add” and assign a name to your new Design Variant:
This new Variant will NOT include the custom “NoWrap” property on Whitespace. Edit any other parameters as needed. (but simply creating a new one will solve this issue)
Save your Design System and navigate back to your Skuid page. Then point it towards your new cloned Design System:
And finally, select your template field and assign it the new Field Design Variant:
**NOTE - you can edit/tweak any Component/nested component/variables in your newly cloned Design System as needed**
I hope this solves your problem, let me know if you run into any additional blockers.
‘Justin
Thanks @Justin_Campbell .
Why though can’t I clone from Lightning? I only have Ink in the styles from which I can clone. I certainly believe what you showed me will help. I just can’t get started.
@Justin_Campbell I found my problem. I expected the “Clone styles from...” drop-down would show all available styles immediately. Instead, I had to remove the “Ink” and then do the drop-down. Then all are shown. The default was acting as a filter.
@Justin_Campbell I meant to mark your answer as the best. I marked the wrong one. Now I don’t know how to change it.
