CloudSpark Content Explorer App - Demo

Key Takeaways

[Music] my name is NES cus I am VP technology at Clouds spark Labs we develop teams apps for many organizations uh one of the ones that we've developed for our customers is the content Explorer app which we've actually open sourced um for everybody to use for free uh let me just give you guys quick Spiel uh we only have about 10 minutes so I actually want to get into the demo of the app and Jose on the line is our one of our senior developers on the product is actually going to demo it for you and go through some of the source code as well so let me just quickly start by talking about why we developed it so as we go on our project side and the Consulting side of the business called Creos spark we deal with a lot of customers now and especially during the pandemic we're finding that it's very important that we keep Microsoft teams top of mind when we're developing an information architecture right so whatever you're doing in terms of document management collaboration you know SharePoint you know site collections modern site collections classic you name it you should have teams top of mind because that's where everybody is working 70 to 90% of the time we're finding and going from a browser to teams and to a different apps it's really uh frustrating for users to switch contact so that's kind of one of the reasons we created the Conta content Explorer app because document management and collaboration within SharePoint may not always reflect the way your organization and your teams are structured and as we know when you create a team there is a SharePoint site created on the back end it doesn't mean your files are going to be stored there especially if you guys are already a structured and organized in your in the way your company works from a document management standpoint we don't want to restrict the users and the organization to leverage the SharePoint site that's backed by the team they want we want them to be able to point to any of their document management site collections on SharePoint online or SharePoint on prep um so we want to and that's going to really help from a use end user productivity standpoint because some organizations have already created this whole information architecture a site structure a navigation structure all of the stuff that's important as part of information architecture we want them to elaborate what they've created and to be able to use the teams that might not correlate to those site collections there's a lot of capabilities on Microsoft has given you with teams out out of the box which are going to help you from a productivity standpoint so things like being able to expose your document libraries within the tabs of your teams to use the ad cloud storage capability with the files what we did was create this content Explorer to be able to point to any site collector ction in your SharePoint online sites that you have and being able to show all of the libraries and the lists and all of the capabilities there uh in a security trimmed manner so that you only see what you have access to within a tab within any team and now not only you can you point to any site collection that has subsites that has you know all your library structure and you could view it in a flat manner or you can view it in a hierarchical manner so all of if you're not on Modern yet you could point to a classic based site and it'll show you all the subsites and such you can browse through them or if you're already on Modern then you can actually point to a hub site and it will show you all the Hub attached sites that you have as well so in either a flat or high hierarchical manner so that's a really cool app that we built that our customers seem to love and one of the main reasons we built it was so that it would work with on Prem because there's a lot of hybrid companies out there that are on a hybrid environment where they're still pointing they're using an on- premise version of SharePoint and they've already have their structure they spent years and years on developing that site structure in the information architecture and their team structure which is online may not directly reflect how they've done their document management so kind of the premium version of what we're what we've created connects to the on premise environment the free version version which Jose is going to show you now is actually available for everybody to download and we've given that for free and you can enhance it and that's where I'm now going to pass it off to Jose to give you a quick demo all right thanks re so um what I'd like to do is show a few different things the first of which is a quick demonstration of the content Explorer in action I know you've seen some screenshots but we'll go kind of walk through it just so you can see firsthand how the app works as a teams tab and then after a brief demo uh we can explore the inapp settings available that allow us to configure The View presented to the end user and lastly with a better understanding of how the app works then we can take a look at the code base so let's begin by navigating over to our content Explorer tab after loading the first thing we're going to see are the lists and document libraries for a given site in our case we are looking at the about site collection we can see this site collection in SharePoint right over here and so I have a couple of document libraries company info uh Etc some of them are are right out of the box so importantly this site collection is a hub site now we can select a given library and navigate to its contents this now links us directly to the library in SharePoint so what we're seeing now is a SharePoint page for the contents of the chosen document Library if we wanted to open a file we can go ahead and click on it we'll open up a new window in SharePoint for file editing so let's close this down and let's go back to our content Explorer screen now the strength of this solution is not so much that we can display a site's lists in libraries within teams I think that's pretty fundamental but actually that we can now allow the user to find content that they will need uh when that content is spread across different hubs sites and Associated hubs sites for that we can use our dropdown to see a listing not only of our about site but it's Associated hubs sites so here we have resources and FAQs if I click on resources we can see now the View kind of uploads it shows the list in libraries for our resources site collection so this is the true benefit of the functionality that we've coded here but before we take a look at the code itself maybe we could spend a little bit of time looking at the tab settings that are available so I'm going to go ahead and click on our Tab and click on settings we can see that our content Explorer requires a given site collection URL to function this is where I'm pointing it to we direct all our service calls to retrieve the lists in libraries from this endpoint additionally uh we have the ability to show or hide the types of SharePoint lists in libraries perhaps the the user doesn't care maybe about site Pages or style library and we can deselect that and well that will hide them in the view in addition to Hubs sites we also have the ability to display the contents of a subsite of a given site collection and finally we can alter the kind of layout that a user Can See For The Hub site and its Associated sites right now we have selected a flat presentation of our sites but we can change this to grouped and go ahead and apply so now we see our sites are grouped together by The Hub site with which they are associated so I can go ahead and obviously use the the functionality that comes right out of the box with fluent UI so now that we have an idea what the app does and how we can configure it let's turn our attention to how this was coded so I'm going to head into Visual Studio code to see our source files minimize these just to give you a better idea of our structure layout so as an overview we see we have a web part file but we have also divided our app into components constants helpers to prepare the data being sent to an API or coming back from an API our interfaces for our type data and our API Services importantly as we've already seen we're leveraging Microsoft's fluent UI component library to get the look and feel and functionality to match Microsoft services but first let's take a look at our web part file which we're already in here here is where we set our rendered component in our case it's the my list app and we pass in all our web part properties that we need we saw these in the settings panel for our web part now this is foundational to spfx teams tab devel vment so I'm going to skip ahead to our side of the code so as mentioned we are rendering the my list app component so let's go take a look at this component all right so I'm going to head down to the render method because we see there's nothing really fancy going on here we're displaying a site selection dropdown we're displaying a details list and this happens when the user has a flat layout so when it's not equal to grouped and alternatively we just display a grouped list uh which is our own custom component when they select grouped so our site selection component is really our dropdown now this is sensitive to whether we're displaying normal site collections or a hub site with a Associated sites now based on what site we select in the site selection drop down we call our SharePoint API to get the lists and libraries to be displayed in our the fluent UI detail list and and for this we just call the SharePoint API to get SharePoint list and libraries this type of call is pretty fundamental to the SharePoint API so again I won't be spending time on this instead let's focus on how we get our site selection component to get a list of hubs sites and their Associated sites so let's turn to the site selection component so our work here is really done in our services call which we'll see shortly but our site selection component here is the first thing is that it mounts um and it tries to load up all of the sites that it can get and our load sites here as we can see is we want to first get some site information in particular that's going to be important to us is is this site a hub site if it isn't a Hub site then we're just displaying a normal site collection and then we go and get the lists in libraries if it is a hub site however then we have our magic call to get our Associated hubs sites so let's take a look at our get Associated hubs sites in our service call here this call is pretty important in that it's not using a SharePoint API or the the normal SharePoint API endpoint to get this information we are actually first having to get our a hub API token from the SharePoint home API so here we get an API token from our SharePoint Home Service API and from this token uh that we get from calling the SharePoint home service we are able to retrieve an a secondary SharePoint Home Service API endpoint which allows us to then retrieve all of the associated hubs sites with a given Hub site ID and this will then retrieve all of our hubs sites all of the child or Associated hubs sites as well as their subsites so this is where kind of the magic happens and then they're kind of retrieved in no particular order so I have a helper function that prepares this data in the structure that I need I have hubs sites as kind of the root and then I have Associated hubs sites underneath those and then subsites underneath those so that's the Crux of of the functionality here to get our Associated hubs sites once we've finished this portion then it's just a straight call to get lists in libraries from the SharePoint API so that's my brief overview of the code base and the functionality for the content Explorer yeah Jose do you mind um clicking on the link that Hugo posted on the chat so that everybody could see where to get this source code yeah absolutely perfect and so here we have a link to our source files and so we should have the exact same structure as we just noted we have our component constants interfaces and the last thing I showed you was our SharePoint service calls in here so this is all available to download for you to test great thank you so much thank you everyone and we'll pass it back to you Dana awesome thank you so much for that demo