Microsoft 365 Community Community Demos, 30 Jun 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building custom accordion Tabs experience with rich text experiences

Description

In this 9-minute developer-focused demo, Arun Kumar Perumal shows how this web part allows users to create and manage content laid out in tabbed or accordion view format for both desktop and mobile. Switch between views using Property Field Collection Data and edit content with tinyMCE Rich Text Editor for SharePoint Online. Uses Custom Accordion components and Custom Tab components included in the code. Also uses primary colors and themes from host site.. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 30, 2022.

Demo Presenter
• Arun Kumar Perumal (Wipro) | @arun_perumal16

Supporting materials
• Sample - Tab Accordion Web Part with Property Field Collection Data and tinyMCE for Rich Text Editing | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-accordion-with-richtext

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

So today we'll look at accordion tabs with rich text, a small introduction about me. I work as a microsoft, 365 sme across a power platform and whole of microsoft, 365 and uh across spfx and other areas you can reach me at r1682 hotmail.com and on linkedin as well and twitter. Our own underscore terminal16 just quickly look at the features, so this accordion and tabs provides you an ability to create accordions and tabs based on content.

A

Of course, it has the ability to create these tabs and the content based on a rich text. Editor. This sample uses tiny mce, which, as far as I understand, is one of the best. Of course you could replace it with the editor that we get with pmp react controls it defaults to accordion in a mobile display. You can change that behavior as well.

A

If you need to but accordion seems better display within the mobile uses, two of the custom components, both accordion and tabs tabs can be changed to again to use pivot, that's again available as part of the react, controls and accordion. Also, it uses the site primary colors and themes.

A

So, let's quickly, look at a demo, a demo of the microsoft viva related content. Just to give you an inference of how things can be done, and one of the key things in this is the ability to change between a tab and an accordion and also the ability to manage tabs.

A

What we get in this particular thing is again: it uses the property field control, but again just provides you only the ability to add the title and then the element, the tab that you add like, for example, if I add sample tab, uh it adds as an uh thing and provides you a blank uh text editor to update okay- and this is this- is the tinymc we'll look at the code? Let me quickly remove this. I will show you a couple of other functionalities that are there within this tinymc, like for example.

A

Here, if I go to the view, there is an a video that has been cleared and that uses the video control within the tiny mc you just have to embed, and what I have additionally done is the controls that you can do it's a pure html that has been put on the page default. When you add this web part, you will get a sample content with three tabs or accordions tab is what is defaulted to, and then you get a sample content for tab, 1, tab, 2 and m3 same with the content as well.

A

So moving to the code, the key things here on the package. Basically, I'm using a tiny mc react, which is for the rich text editor and this after you add the reference or the npm package to your project. You need to still create a reference to it. Firstly, uh with a declaration as a module referencing to that particular module within your node modules, and then also you need to have.

A

That you need to mention the path of your external reference to the gs file. This, even though you add it as a package to your spfx project. You need to reference this. I have referenced this to a cdn.

A

What we did actually with the customer was to have this package hosted within the cdn of the customer, so that there is no reference to the cdn outside external. That's another thing which you could probably do okay and then go moving on to the code further.

A

This is a web part class where we basically have uh the references to two different uh components. uh One is the accordion component and the other one is the tab component. We look at each one of them, but moving back to the web part, it's basically based on the option that is being chosen.

A

It displays uh the uh yeah it displays, based on the property type that has been chosen, whether it is an accordion or a tab. The according uh the the element or the component is rendered accordingly in the dom okay, and uh if it is a mobile, it basically uh renders the uh dom or renders accordion by default. Okay and the way uh it checks for the mobile.

A

Is using the browser utilities, which is again a procedurality dot, is mobile browser and then we basically have this as part of the core library and then that's basically how the mobile thing is checked: okay and for the tabs, basically just using the property pane and then just a property field collection data for the tabs, just the title that has been captured. Okay, moving to the.

A

Example, the accordion here what happens is based on the display mode if it is edit or display, uh if it is in the edit mode, then the specific accordion controls are put and then within the body the editor from the tiny mce is rendered.

A

Actually here, I'm listing all the toolbar options, but you could limit to basically what you need as part of your specific requirements: okay and and also the styles and other things you can control all of this within your options that you get as part of your init method for the uh for the editor.

A

How does this effect update back the object that hand that happens with this handle change uh edit handle editor change. This is a method which gets called on on change event of the editor for each individual editor.

A

Each individual editor has an a unique id that has been defined by the guid that has been passed with the editor and then the index of the item that is there, okay and when it comes to this, basically, we are pushing back the content to the properties and the tabs are basically the object within the within the props.

A

That has been passed and for a specific id this id we get back based on the name of that particular editor, okay, target.id or our id of the editor and then update based on that update the apps, and this is basically what we are eventually going to render in when it is not in the in the rather in the display mode.

A

Okay, so here it basically is pushing things to a div, uh basically setting the dangerously set inner html, and even that particular dave has an id just just as an identifier and there's an attempt to use area use.

A

Basically the area controls and others just to have the tabbing effect. But I think it's still a bit buggy I'll, probably try to see if I can have that fixed in a proper way. Okay and coming back to the tab, it uses again the similar sort of an approach, but with the tab, custom components that is there, and here you have the similar approach where you have.

A

If it is checked whether if it is in a rate mode or a display mode and accordingly uh displaying the editor and the similar sort of options that are there with other accordion, okay, just on the utilities, basically with the utilities, you have the individual, the main accordion, which encompasses the other things like the accordion item according body and the title title and then the body.

A

Similarly, for the tab you have, the tabs is the main component, and then you have the tab, links and then the content for it. Okay, if you quickly see what we have as part of, for example, the accordion right so here the display part has the accordion accordion on the top, where you have basically for each of the tabs that are available or the accordions that are identified. There is an accordion item, and then you have the title and then the body, so that's more it.

A

The key thing here, especially with the tinymc, is to have the config file or a reference to your tiny mc dot js either you could load it directly or have it as an external reference, and this is a key thing for the tiny mc to work mostly done and back over to you.

B

All right, fantastic stuff: there arun really excited to see that very cool demo with the accordion tabs.