0

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>
                    );
                  }
                }
  • 2
    There is already a developed Tiles web part on GitHub if you want to reuse it. or you can change and update it according to your requirements. – Ganesh Sanap Aug 14 at 8:55
  • Thank you let me check – kumar Aug 14 at 9:28
  • 1
    Sure, let me know if this is useful and works for you. – Ganesh Sanap Aug 14 at 9:32
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/

Grid web part

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?

  • Thanks Hugo for great article let me give a try and i will let you know – kumar Aug 14 at 13:43
  • Thanks Hugo your article worked for me i am able to create responsive card from Sharepoint list – kumar Aug 16 at 6:36
  • 1
    That's great! Let me know if you need anything else! – Hugo Bernier Aug 19 at 23:56
  • Thank you sure will let you know – kumar Aug 20 at 2:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.