1

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>
                    );
                  }
                }
3
  • 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. Aug 14, 2019 at 8:55
  • Thank you let me check
    – kumar
    Aug 14, 2019 at 9:28
  • 1
    Sure, let me know if this is useful and works for you. Aug 14, 2019 at 9:32

1 Answer 1

2

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?

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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