Styling a vaadin Component (Dialog) with CSS file

Question

I have a Dialog that retrieve informations from an endpoint (String of information) but I have a Problem with style this dialog, because all these informations appear untidily!

For example to be clear, I have this endpoint, that it helps me to retrieve a Data about Mobile, and want to show this Data in a Dialog (BUT the Style should like Screenshot Nr. 1), but my Problem is that the data appears as Preview (Screenshot 2).

enter image description here

If I understand correctly you want to pretty print the JSON, right? — Simon Martinelli
– Simon Martinelli, Commented Sep 6, 2021 at 14:30
The simplest solution would be to put the formatted JSON in a <pre></pre> block stackoverflow.com/questions/16862627/… — Simon Martinelli
– Simon Martinelli, Commented Sep 6, 2021 at 14:41

Simon Martinelli · Accepted Answer · 2021-09-08 11:44:54Z

1

You can use the Html component with a pre tag where you put the formatted JSON:

Html pre = new Html("<pre>" + formattedJson + "</pre>");

To format the JSON String you can use this:

String prettyJson = mapper.writerWithDefaultPrettyPrinter()
                          .writeValueAsString(mapper.readTree(inputJson));

Find more examples here: https://roytuts.com/how-to-pretty-print-json-in-java/

edited Sep 8, 2021 at 11:44

answered Sep 7, 2021 at 7:42

Simon Martinelli

36.6k6 gold badges62 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

albo Over a year ago

it works thanks but it shows the information in one line !

Simon Martinelli Over a year ago

Have you formatted the JSON? roytuts.com/how-to-pretty-print-json-in-java

albo Over a year ago

no because i read the data from an endpoint (not directly from JOSN file) and the Data be able to change. i mean i want to call the endpoint to show the data..

Simon Martinelli Over a year ago

That doesn't matter where the JSON string comes from. Simply format it before passing it to the HTML component

albo Over a year ago

can u show me an example if the data comes from an endpoin and then how to pass it !! am so sorry but am new in this .. and thanks.

Collectives™ on Stack Overflow

Styling a vaadin Component (Dialog) with CSS file

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related