Recently, I started a newsletter. During the planning phase, I thought about content for my humbled subscribers. I watched a couple of development sessions while attending the Microsoft 365 Community Day. While great developers delivered those sessions, I recognised the overuse of <div> elements.
[Read more]
Manage the Position of your HTML Dialog on SharePoint Pages
This article is one of the follow-up articles on how to use the HTML Dialog element in SharePoint Framework. Now we look closer at the possibilities of positioning the modal dialogue.
You will learn to put the dialogue on the page’s top, bottom, left, and right.
How to create native HTML Modal Dialogs instead SPFx Dialogs
When your application or webpart requires a modal dialogue, you might use the package @microsoft/sp-dialog based on this tutorial on how to use it. There is nothing wrong with this solution but something out of time.
[Read more]
Native lazy-loading images with aspect-ratio
Recently two changes have been shipped with the latest browsers versions that impact your development today too. In short, you can now better define the loading behaviour for images. It’s big news in case of performance and usability. Those changes are:
- Always use height and width on images
- Natively Lazy-load images and iframes
this.domElement is your new document object in SPFx web parts development
You are familiar with the JavaScript method like ‘document.getElementByID’. Since HTML5 the Document Object Model has more to offer than return an element by its ID on a document.
I case of web part development you should forget that the document object inside and HTML exists instead you should request HTML elements differently.
Inconvenient page setup on modern pages or broken z-index behaviour
Consider the following simple scenario. You like to write a new SPFx web part, and you have the requirement to show a popup or a flyout container opened from a web part. This flyout menu should overlay whatever comes after your web part.
AI-driven Accessibility helper for images in SharePoint Online
Recently a new feature has been added to the authoring process in SharePoint online. This new feature helps you to define appropriate alternative text descriptions for your images on pages. In general to specify alternative text for images is possible the first time in SharePoint history. Previously only the title of an image could be defined.
When a new image gets inserted on a page, the image gets analysed by a background service, which assumes the content of the image and returns an appropriate description. Through the help of pattern recognition and artificial intelligence, the returned values are pretty accurate, at least with the pictures I tested this feature so far.
Alternative to innerHTML in SharePoint Framework web parts
When you create a new project without any framework, the default web part content in the code will be added through innerHTML.
Technically there is nothing wrong with this approach, but you might run into a problem when you add more content to the web part afterward using the same method. In this case, the previously added content will be overwritten.
To avoid this behavior, you can use jQuery and the ‘append‘ or ‘prepend‘ methods to add your content. It works well but requires an external library.
Instead of using jQuery, there is a native method in the document object model of HTML available.
Add image with caption to SharePoint rich text editor
Have you ever tried to add a caption to an image inside the SharePoint rich text editor? In this case you might end up editing the source code of the editor. Before you touch the source code of your page, let me show you a more convenient way to achieve this without advanced coding techniques.