Show HTML in Previewer in Universal GUI

Hi @Harm Horstman. 

I am assuming you have a HTML field here. I think you can achieve it using a cardlist component and set up the card list to only show the HTML field. If I remember correctly it will automatically adjust its height to the contents. 

Hello @Freddy,

Thanks, for the tip. That would be great, I will give it a try.

@Freddy,

I've tried it and it looks promising. However, one problem, long texts are is not wrapped properly.

Do you have experience with this problem? And have you already found a solution for it?

@Harm Horstman yes you can do that with custom CSS. 

 white-space: normal !important;

@tiago can you confirm it was this CSS part that made word-wrapping a reality? 

@Freddy 

Nice, but can you give me a full example of how your custom.css looks like?

Add the following to your custom CSS, maybe it works straight out of the box :)

.cardlist-item-container .cardlist-item__value, .css-4f29yv .cardlist-item-container .cardlist-item__label, .css-4f29yv .cardlist-item-container .cardlist-item__value > *, .css-4f29yv .cardlist-item-container .cardlist-item__label--checkbox {
    white-space: normal !important;
}

Thank you @Freddy, but unfortunately this doesn't seem to be the solution, maybe @ServiceAndCare ( @Jeroen van den Belt ) can give answers?

@Freddy @Harm Horstman

Sorry for the late response.  

The css provided by Freddy is indeed what prevents the sentences being cut off in the card lists. 

When you test it, make sure to throw away the cache, to make sure the new CSS is loaded. 

I finally found a good workable solution by adding some inline styling in the dataset

SELECT note_guid
     , note_body_html = '<p style = "margin: 4.00px; white-space: normal;">
                      + <span style="color: #3366ff;">' 
                      + FORMAT(n.insert_date_time, 'dd-MMM-yyyy HH:mm:ss', 'en-en') + ' - ' 
                      + ISNULL(u.friendly_name, n.insert_user) + '<br/><br/>' + note + <p/>' 
     , note_date_time = n.insert_date_time
FROM      note  n
LEFT JOIN users u ON u.user_name = n.insert_user

 This is the result:

It is indeed an option to include it in your data too, but it will increase network load.

Since it is a static piece of CSS styling. You can place it in the resources of the GUI as described here:
https://docs.thinkwisesoftware.com/docs/sf/themes#custom-css-in-the-universal-gui

The advantage of this is that this piece of CSS is only send to the client once, when the GUI is opened for the first time.

@Erik Brink when can we expect a previewer component that can handle HTML? Is it necessary to make a ticket for this? Or is development already in progress?

Hi Harm,

I will bring it up for the planning of upcoming sprints. We will react to this post once we know more.

Best regards,
Erik

@Erik Brink: what about showing external webpages (URL) in the previewer? Or is this already possible in the Universal GUI? This to embed for example a PowerBI report.

At the moment, only for web-addresses with the same origin as the GUI/Indicium. Browsers will block the rest due to CORS security.

There is an item on the backlog to research possibilities with this, e.g. allowing a whitelisted set of addresses to show up. We need this to work ourself to on e.g. TCP.

In the upcoming release (2023.1.15) the Universal GUI will add support for previewing the data of an HTML type column in the preview component. 

Hi @Erik Brink, when can we expect the new release?

Sorry @Harm Horstman for my late response. It is available now in TCP as a beta release. Next week on friday as the official release.