SPFX Tiles webpart

Question

Hi I am new to SPFX and react JS , i like to create Tiles webpart from sharepoint list where it will render all properties of tiles from list like icon, colour,text,

I had tried using office fabric ui and tried to create document card, I want to add Sharepoint list properties to this document card currently its static value

                import * as React from 'react';
                import {
                  DocumentCard,
                  DocumentCardActivity,
                  DocumentCardPreview,
                  DocumentCardTitle,
                  IDocumentCardPreviewProps
                } from 'office-ui-fabric-react/lib/DocumentCard';
                import { ImageFit } from 'office-ui-fabric-react/lib/Image';
                import { TestImages } from '../../../common/TestImages';

                export class DocumentCardBasicExample extends React.PureComponent {
                  public render(): JSX.Element {
                    const previewProps: IDocumentCardPreviewProps = {
                      previewImages: [
                        {
                          name: 'Revenue stream proposal fiscal year 2016 version02.pptx',
                          linkProps: {
                            href: 'http://bing.com',
                            target: '_blank'
                          },
                          previewImageSrc: TestImages.documentPreview,
                          iconSrc: TestImages.iconPpt,
                          imageFit: ImageFit.cover,
                          width: 318,
                          height: 196
                        }
                      ]
                    };

                    return (
                      <DocumentCard onClickHref="http://bing.com">
                        <DocumentCardPreview {...previewProps} />
                        <DocumentCardTitle
                          title="Large_file_name_with_underscores_used_to_separate_all_of_the_words_and_there_are_so_many_words_it_needs_truncating.pptx"
                          shouldTruncate={true}
                        />
                        <DocumentCardActivity
                          activity="Created a few minutes ago"
                          people={[{ name: 'Annie Lindqvist', profileImageSrc: TestImages.personaFemale }]}
                        />
                      </DocumentCard>
                    );
                  }
                }

Answer 1

Kumar,

I don't know if this will help, but I wrote a blog post on the Grid layout -- complete with code samples. It uses the DocumentCard to render the grid items.

Take a look at: https://tahoeninjas.blog/2019/07/28/sharepoint-framework-design-series-layout-patterns-i/

And if there is something that you're looking for that isn't in the post, let me know and I'll try and update it. That's what the blog post series is all about!

I hope this helps?