How to create a dynamic list of lists or carousels

myusername · January 4, 2023, 9:24pm

Hello,

I am new to Lightning and running into issues when dynamically creating a page full of lists, carousels, and other widgets with typescript. Essentially, I want to have a page’s layout be dynamic based on a response, meaning different lists and carousels and widgets with different data that are all scrollable. Would it be best to put these dynamic lists/carousels/widgets into a list that is a column direction? Or is there a better way to implement this?

What is the best way to dynamically supply a list/carousel/widget component with the items it will display? The documentation is lacking here (or I cannot find the right section), and I cannot seem to find a good solution to do this. For example, I have a several customized list and carousel components. How do I dynamically load content into them from another file that got the response? I cannot seem to do this in the template where it seems to want me to do it, and it seems that the other methods I am trying throws errors.

Just trying to learn best practices/how to use Lightning!

Thanks!

chiefcll · January 5, 2023, 3:46pm

Hi!

Check out the source code of:

Essentially, you want to get your dynamic data and convert it into Lightning objects and then patch it into the list. The Entity page (lightning-ui-tmdb/Entity.js at main · ComcastSamples/lightning-ui-tmdb · GitHub) has multiple rows of dynamic data that it loads in and then patches it to the UI:

set recommendations(items) {
    this._SectionsContainer.tag('Items.Recommendations').items = items;
  }

I’m setting the recommendations via the Router here:

github.com

ComcastSamples/lightning-ui-tmdb/blob/main/src/api/providers/movie.js#L7


      
          import api, { getImageUrl } from '../';
          import { convertItemsToTiles } from '../formatters/ItemFormatter';
          
          
export default function (page, { movieId }) {
            // api.get(`/movie/${movieId}/watch/providers`);
            api.get(`/movie/${movieId}/recommendations`).then(({ results }) => {
              page.recommendations = convertItemsToTiles(results.slice(0, 10));
            });
            api.get(`/movie/${movieId}/credits`).then(({ cast }) => {
              page.castAndCrew = convertItemsToTiles(cast.slice(0, 10));
            });
            return api.get('/movie/' + movieId).then((data) => {
              page.tag('Backdrop').src = getImageUrl(data.backdrop_path, 'original');
              page.entityInfo = data;
            });
          }

LMK if you have questions.

Chris

RajShah · July 11, 2023, 11:58am

Hi @chiefcll, I have implemented the same and created a dynamic list of lists. I did instead like to know from you, how to manage the scrolling event. The focus is driven but I cannot scroll vertically to other row lists generated. Could you help me in resolving this issue? Thanks in advance for your help

A list with a vertical scroll.
Inner list with horizontal scroll.