Custom details page

Get Help
1

Capture

I’m trying to show a custom details page using the list component. Is it possible to edit the title of the list component with javascript? I only want to show 1 row of details and I’m at a loss with the best method to show the information. Any advice helps.

Thanks

2

Hi Zman,

If you are only using a simple list component. You can truncate the list title simply with either CSS or Javascript. You can put CSS code to the screen CSS section and JS code to the screen Javascript code section.

CSS Solution:

.list-title {
    width: 370px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

You can change the width according to your needs.
JS Solution:

$(document).ready(function() {
$('.list-title').each(function () {
    if ($(this).text().length>60) {
        $(this).text($(this).text().substr(0, 60) + "...");
    }
});
});

You can change the 60 characters limit according to your needs. Also, you can change the selector “.list-title” to the selector of your list title on the page. You can use inspect element on chrome to see the selector of your list title.

In case you are using the list from the data source component then you can use the handlebars solution. Although the above solutions CSS and JS solutions can work for LFD too.

Paste the following code to your screen JS section.

Handlebars.registerHelper('trimString', function(passedString, startstring, endstring) {
   var theString = passedString.substring( startstring, endstring );
   return new Handlebars.SafeString(theString)
});

Then go to data view settings. Select the field name as custom. Put the following code in the custom field.

{{{trimString Title 0 10}}}

Here you can replace “Title” with what your data source column name is. Also, 0 in this code is the starting point and 10 is the ending point. You can change this limit according to your needs.

Hope this helps.