Modern Pages
3 TopicsSharepoint 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, AdityaSolved5.6KViews0likes5CommentsIssue with accessing DOM of very long SharePoint online modern pages
Hi, Currently we are facing issue with custom SPFx web part on a very long SharePoint online modern pages. I suspect it's due to some kind of Lazy loading of modern page.Our SPFx web part basically provides an Anchor tag which links to different section in same page. When we create a different section (using Text web part), we are adding another SPFx web part which acts as placeholder div and assigns "id" to the placeholder. When user clicks the Anchor tag whose section resides somewhere down in the page ( with div element <div id="SectionY"> ), It does not jump to the respective section. We noticed that, idocument.getElementById('SectionY') or $('#SectionY') is null. Apparently if we scroll down and then try to get element by its Id, We are getting the element (we tried it in Chrome Console). Anyone facing similar issues? How does modern SharePoint online page rendering is different than classic site pages? Is there any other way to access complete DOM of the page when page is very long?. Thanks, Guru1.7KViews0likes1CommentModern pages with text web parts upgraded from CKEditor v4 to v5 lose image positioning
We have lots of pages where images are positioned next to each other like so: This positioning can be done in pages that are programmatically created. When editing the page, the images stay as they are - next to each other. All good. Currently SharePoint is upgrading the rich text editor backing the text editor web part: CKEditor. And this causes issues. So far the text editor was based on CKEditor v4. Now, for new pages and selected old pages SharePoint is using CKEditor v5. Old pages are upgraded to the new version when editing those pages. (But not all pages. Not sure how those to be upgraded are chosen.) Note: the new text editor version can be detected by inspecting the editor styles. If rte--ck5 is in use, it's a v5 page. Otherwise v4. Inline image handling changed in the new CKEditor v5 version. In v4 pages there was a hidden image web part for each inline image. In v5 pages this changed and there are no hidden image web parts anymore. Here's the issue: after upgrading old pages that contain adjacent images, they are no longer adjacent, but stacked on top of each other. Note: recently, there were problems when upgrading tables from CKEditor v4 to v5 (see https://github.com/SharePoint/sp-dev-docs/issues/9160). In my books this is another issue with the new text web part based on CKEditor v5. Images that are adjacent in CKEditor v4 should stay next to each other in upgraded pages as well, otherwise formatting of those pages is seriously negatively affected. I'd love to have input on this from somebody in the know. Edit: I'm providing a PowerShell script that creates a test page to reproduce the behavior. Although whether you see the behavior or not is dependent on whether the page will be upgraded to v5 on your tenant, or not. https://github.com/WikiTransformationProject/library/tree/main/issue-related/ckeditor/inline-images.1.6KViews0likes0Comments