Forum Discussion
Sharepoint online - Guided tours, feature tour, walk throughs
TLDR;
Is there a way to create in-app walkthroughs/ guides tours/ feature tours using open source packages like intro.js, chardin.js, joyride, bootstrap, HopScotch, Crumble with Modern SharePoint Online environment? I couldn't find any tutorials for the same. Since I am not a web developer I could not ascertain if this can work with the modern SharePoint Online site pages at all?
Long version I am working on intranet design, using SharePoint online. This intranet serves as a knowledge base, a process workflow reference, and a collaborative tool. I am trying to put together a tutorial so that people can understand what the various web parts are. I have tried using ppt, video, sway, word doc but nothing seems to easy because the user needs to open up two different windows and need to simultaneously walk through both of them. That doesn't work at all for the mobile environment. I researched that websites like walkme, whatfix, inline etc. provide subscription services for the same. I am looking for open source free to use alternatives for the same. My researched shows there are several packages that can help with this, Joyride, intor.js, bootstrap etc. But I cannot ascertain if these can be used with the modern SharePoint online site pages.
- Could someone guide me to a resource that shows how these and other packages can be set up to use within the SharePoint online environment?
- Do I need to be worried about privacy and intranet content being exposed to third party apps/ developers if I use these plugins?
- Any other suggestions on creating walkthroughs for SharePoint online environment that work on mobile and desktop?
- Any other places where I can post this question?
My background: I am not a developer but I tinker with a lot of stuff, I generally use python, VBA, and few visual scripting languages for automation for engineering design and reporting.
Any help is appreciated.
Thanks, Aditya
Hi adika07 ,
this is my approach to adoption in SharePoint Online Modern Sites.
This is a sample, just to share with the community a possible approach using SPFx (SharePoint Framework). Source code is available in github, and 19th December I'll show it with a small demos during SharePoint community call.
Another solution could be 3th parties tool (like https://happit.com/) but I never used it, just listen about it.
Cheers!Federico
- MushiiiCopper Contributor
Hello Aditya,
Creating in-app walkthroughs, guided tours, or feature tours on SharePoint Online using open-source libraries like intro.js, chardin.js, joyride, Bootstrap, HopScotch, or Crumble can be a bit challenging due to the restrictions and specific architecture of SharePoint Online, particularly with the Modern experience pages. Here’s a detailed response to your inquiries:
- Using Open Source Libraries in SharePoint Online:
- Compatibility: The Modern SharePoint Online environment utilizes the SharePoint Framework (SPFx) for customizations. Most JavaScript libraries that don't specifically rely on manipulating the DOM directly should technically work with SharePoint Online, provided they are implemented correctly within the SPFx framework. However, libraries that manipulate the DOM heavily (like some of those used for guided tours) may face compatibility issues due to the dynamic nature of SharePoint Online’s content rendering and updates.
- Implementation: To implement these libraries, you would typically need to develop an SPFx extension. This extension can inject the required JavaScript and CSS files into your SharePoint pages. If you are not a web developer, this might require some learning or assistance from someone with experience in web development and specifically in SPFx.
- Privacy and Security Concerns:
- Third-Party Services: When using third-party libraries or services, especially in an intranet environment, there are always concerns about data privacy and security. With open-source libraries that you host yourself, the risk is generally lower because you're not sending data to third-party servers. Still, you should review the library code to ensure it does not transmit data externally.
- Permissions: SPFx extensions run in the context of the current user, meaning they have access to any data that the user can access. It's crucial to ensure that your implementation does not inadvertently expose sensitive information.
- Alternatives for Creating Walkthroughs:
- PnP PowerShell and PnP Modern Search: For a less technical approach, consider using out-of-the-box SharePoint Online features combined with custom SharePoint lists to guide users through features. You could create a 'Help' section where each item details a feature and links to relevant parts of the intranet.
- Microsoft Power Apps: Another alternative might be to use Power Apps to create custom help dialogs or overlays that can be more integrated into your SharePoint environment without extensive development.
- Where to Ask for More Help:
- Microsoft Tech Community: This is a great place to ask such questions as it is frequented by both Microsoft employees and experienced community contributors.
- Stack Overflow: Specifically tag your questions with SharePoint, SPFx, etc.
- GitHub Discussions within the repository of the specific library you are considering might also be helpful.
Given your background in scripting and automation, picking up the basics of SPFx for implementing simple extensions might be within reach with some dedicated study. Microsoft’s documentation and numerous community blogs and tutorials can be invaluable here.
Best of luck with your SharePoint Online project, and I hope this information helps you create an effective and user-friendly guided tour for your intranet!
Regard: BNB Travel & Tours
- Using Open Source Libraries in SharePoint Online:
- sainlaraCopper Contributor
SharePoint Online allows you to create custom web parts using SharePoint Framework (SPFx). If you or someone on your team has development skills, you can potentially use SPFx to create custom web parts for the in-app walkthroughs. This would require coding expertise. You can use SharePoint Framework Extensions like Application Customizers to inject JavaScript and CSS into modern SharePoint pages. This approach may allow you to integrate third-party walkthrough libraries like intro.js or HopScotch. However, it would still require development skills. You can create automated flows in Power Automate (formerly known as Microsoft Flow) to guide users through specific processes or actions in SharePoint Online. While this may not provide the same level of interactivity as dedicated walkthrough libraries, it can offer step-by-step guidance. SharePoint Online has its own modern page editing capabilities that allow you to add text, images, and web parts to pages like Hatta sightseeing tour. You can use these features to create visual guides or tutorials. While this doesn't provide interactive tours, it can still be helpful for documentation.Consider leveraging the built-in training resources within SharePoint Online. Microsoft provides extensive documentation, guides, and training materials that can help users understand and navigate SharePoint features.
- adamzampaCopper Contributor
sainlara SharePoint Online offers guided tours, feature walkthroughs, and interactive hatta tours for seamless user experience. Explore the platform with step-by-step guidance, ensuring efficient utilization of its collaborative tools.
- emilyyanna12Copper Contributor
Hi Adamzampa,
Thank you for sharing information about the tour. Are you offering any discounts? I checked this website and they are offering a discount on the Abu Dhabi half-day tour .
Hi adika07 ,
this is my approach to adoption in SharePoint Online Modern Sites.
This is a sample, just to share with the community a possible approach using SPFx (SharePoint Framework). Source code is available in github, and 19th December I'll show it with a small demos during SharePoint community call.
Another solution could be 3th parties tool (like https://happit.com/) but I never used it, just listen about it.
Cheers!Federico