search

ejbenke / SPFx-React-Accordion-Section

Collapsible Accordion Section that can be added to a page & easily populated with SharePoint List data based on List selected by user. Ideal for creating FAQs.
9 stars 7 forks source link

Set first AccordionItem preExpanded attribute to True #5

Closed jm06-zz closed 3 years ago

jm06-zz commented 3 years ago

This is a great piece of code. I am a newbie in that language. I am trying to get the First item to be selected/preExpanded at loading. Not really getting anywhere with below

preExpanded: string[] [optional, default: []] Accepts an array of strings and any AccordionItem whose uuid prop matches any one of these strings will be expanded on mount.

nor how to implement that piece of code I found while searching for an answer.

   <Accordion preExpanded={[placeholders[0].uuid]}>
        {placeholders.map((placeholder: Placeholder) => (
            <AccordionItem
                key={placeholder.heading}
                uuid={placeholder.uuid}
            >
                <AccordionItemHeading>
                    <AccordionItemButton>
                        {placeholder.heading}
                    </AccordionItemButton>
                </AccordionItemHeading>
                <AccordionItemPanel>{placeholder.panel}</AccordionItemPanel>
            </AccordionItem>
        ))}
    </Accordion>

I also found the AccordionItem class with the instanceUuid property

export default class AccordionItem extends React.Component { static defaultProps: typeof defaultProps; static displayName: DisplayName.AccordionItem; instanceUuid: UUID; renderChildren: (itemContext: ItemContext) => JSX.Element; render(): JSX.Element; }

As items/results is a zero based collection, would have thought that items(0).selected=true or items(0).preExpanded=True.

Could anyone point me into the right direction or provides the line of code? it is going to be so simple that I feel embarrassed to ask. Thanking you in advance

ejbenke commented 3 years ago

Thanks for your interest! What you’re trying to do should be very possible with the PreExpanded property of the react-accessible-accordion library. But I’m not able to get it to work either right now and feel like I'm missing something simple as well.

The AccordionItem props uuid values are indeed going to be zero-based, so a value of 0 is what you’d want to provide for the PreExpanded property to have the first AccordionItem be expanded on load while all the others are initially collapsed. So, you’re certainly on the right track there.

I’ll keep playing around with it and see if I can find some code modifications that would provide that behavior.

ejbenke commented 3 years ago

Hi @jm06 - I’ve come up with a way to pre-expand the first AccordionItem the way you describe.

You’ll have to modify 3 lines of code in this file: \src\webparts\reactAccordion\components\ReactAccordion.tsx

Within the REST API call to the selected SharePoint List, in addition to the values of the Title & Content columns we also need to pull in the values of the ID column. An ID column (usually hidden) is included with every List created in SharePoint. The first item you create in any SharePoint List is assigned an ID value of 1, the second one is assigned a value of 2 and so on.

To update the REST API call to include ID, change line 33 to this: sp.web.lists.getById(this.props.listId).items.select("Title","Content","ID").get()

And now that our API call is also selecting the values for the ID column in the List we can set the preExpanded JSX attribute to 1 since the first item you add to your SharePoint List will automatically have an ID value of 1.

Change line 67 to: <Accordion allowZeroExpanded preExpanded={[1]}>

And then we just need to set the uuid for each AccordionItem to the corresponding ID value for the equivalent item in the SharePoint List so that we pre-expand the first item in the accordion but not the others.

So, change line 70 to: <AccordionItem uuid={item.ID}>

Caveat: Make sure not to delete the first item you add to your selected List or you’ll no longer have an item with ID=1 and as a result none of your AccordionItems will end up being expanded.

Hope that helps and thanks again for the great question!

jm06-zz commented 3 years ago

Hi EJ

It is all very helpful though still not working 100% for me but it is great progress. Thank you for helping me.

This is what your code modified looks like for me in the ReactAccordion.tsx line 40 sp.web.lists.getById(this.props.listId).items.select("FAQ","Response", "ID").orderBy("Order1").get() .then((results: Array) => { this.setState({ items: results, preExpanded_ID: results[0].ID }); }) .catch((error:any) => { console.log("Failed to get list items!"); console.log(error); });

I tried to capture the ID from the first item in the Results array

I have tried what you suggested with no avail

I modified the this.state to add preExpanded_ID number variable to capture the ID while this.SetState executes preExpanded_ID: results[0].ID then pass in the But when I hardcode the value, then first item is expanded. If I do hardcode the index, the first item is expanded on loading This is what the results[0] item looks like [cid:9d0c6bd9-3ba4-499b-9b8c-0589fd11103b] I apologise as I feel so silly even with all steps, still failing. So annoyed with myself as so close I can touch it but still eludes me. Grrrr Regards JM Jean-Marc Dejean | CAFOD Applications Support Analyst T: +44 (0)20 7095 5573 | E: jdejean@cafod.org.uk| www.cafod.org.uk Skype: cafod_jmdejean ________________________________ From: ejbenke Sent: 03 December 2020 22:45 To: ejbenke/SPFx-React-Accordion-Section Cc: Jean-Marc Dejean ; Mention Subject: Re: [ejbenke/SPFx-React-Accordion-Section] Set first AccordionItem preExpanded attribute to True (#5) NOTE: this email originated outside CAFOD. Hi @jm06 - I’ve come up with a way to pre-expand the first AccordionItem the way you describe. You’ll have to modify 3 lines of code in this file: \src\webparts\reactAccordion\components\ReactAccordion.tsx Within the REST API call to the selected SharePoint List, in addition to the values of the Title & Content columns we also need to pull in the values of the ID column. An ID column (usually hidden) is included with every List created in SharePoint. The first item you create in any SharePoint List is assigned an ID value of 1, the second one is assigned a value of 2 and so on. To update the REST API call to include ID, change line 33 to this: sp.web.lists.getById(this.props.listId).items.select("Title","Content","ID").get() And now that our API call is also selecting the values for the ID column in the List we can set the preExpanded JSX attribute to 1 since the first item you add to your SharePoint List will automatically have an ID value of 1. Change line 67 to: And then we just need to set the uuid for each AccordionItem to the corresponding ID value for the equivalent item in the SharePoint List so that we pre-expand the first item in the accordion but not the others. So, change line 70 to: Caveat: Make sure not to delete the first item you add to your selected List or you’ll no longer have an item with ID=1 and as a result none of your AccordionItems will end up being expanded. Hope that helps and thanks again for the great question! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe. [https://cafod.org.uk/var/ezflow_site/storage/images/media/images/1.-banners-logos-artwork/staff-email-footers/advent-appeal-email-footer-2020/755279-1-eng-GB/Advent-Appeal-Email-Footer-2020.jpg] Help share comfort and joy this Advent. Donate to our Advent Appeal. ________________________________ The Catholic Agency for Overseas Development (CAFOD) is the official aid agency of the Catholic Church in England and Wales and part of Caritas International. Registered charity number 1160384. Company limited by guarantee registered in England and Wales number 09387398. Registered office: Romero House, 55 Westminster Bridge Road, London SE1 7JB. We protect your privacy and don’t share personal data with third parties. Read our privacy notice here
ejbenke commented 3 years ago

Hi @jm06 -

I believe we're approaching the challenge from different angles. And I think the way you're looking at it is ultimately better since it would leverage the existing uuids from the react-accessible-accordion library, but I still can't get it to work that way myself either.

With my workaround of adding the SharePoint List ID to the REST call and keying off of that ID value, it does require the first List item that's added in SharePoint to the target List not to ever be deleted, but other than that that approach should work by just replacing out the 3 lines I mention in my response (but not including any of your changes). Just wanted to make sure that when you (or anyone else following this thread) who's trying my suggestion is only making those 3 code changes and not any other ones.

I'm going to close the issue since it's also more of a question of a new variation of the code and in a lot of ways related to the react-accessible-accordion library itself, but I'm definitely going to keep thinking about it & if I come up with additional ideas, I'll definitely add them to the thread. And, likewise, please do the same if you have any breakthroughs.

I've heard GitHub is adding a Discussion feature and I think this would be a perfect topic on this Repo once that's available since it would likely get more visibility from other developers who might have some additional ideas on this.

Best, Erik