In the jQuery days, we had a fake pseudo selector named ‘:header’ that allowed you to select all h1 to h6 headers on a page.
CSS does not support this pseudo selector, but here is what you can write instead. [Read more]
0 comment
Multiple ways to insert HTML or SVG Elements into Document Object Model (DOM)
There are some rear occasions after working on how things work for a long time on the web. One of these occasions happened last week.
[Read more]
Use `npm version` to upgrade the version of your SPFx solution
When you like to version your SPFx solutions correctly, then it is not enough to upgrade only the ‘package-solution.json’ in the config folder. You might also want to upgrade the ‘package.json’ file with a corresponding version number too.
Kick-start SPFx build chain on any file change
Whenever you save a TypeScript file in your SPFx project, the build chain creates a new build and refreshes the local workbench automatically.
There are some situations you like to have this support for other asset or frameworks too. In most cases with the PnP/SPFx generator, we need to force a build when a Handlebar or VueJS file get saved.
So the goal is to hijack the build process and add some custom file watch based on the requirement of the framework or file. Why file? Imagine you have an SVG file in your solution. The expected outcome is that you see the changes immediately in your browser.
The key word to this is watch. It requires a custom file extension watch that than trigger the build.
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.
Yo SimpleStyle – First release of my yeoman generator is now available
Last year I released a style guide generator for your SharePoint and Office 365 development.
This year I proudly present a yeoman generator that helps you to get started faster on your next project. There is no need to clone the old repository anymore. Simply create a new project as needed based on this template engine.
To be honest the old version of the Simple Style Guide is currently outdated and shouldn’t be used anymore.
The new document library in SharePoint is built with…
Not so fast… As announced at the May the 4th event there are a lot of new technologies that come to SharePoint and you can pick your personal flavored framework to enhance the SharePoint.
Some things of the upcoming changes are already available in Office 365. Things like the hidden web parts or the new document library. Time to rip the components of the new document library apart and show you what was used to build it.
TL;DR
The new document libraries are built with the following three core components:
- React
- KnockoutJS
- RequireJS
In addition a React-based implementation of Office UI Fabric will become available together with the new SharePoint Framework.
SharePoint – Table of Contents jQuery plugin – Now available on GitHub
Today I decided to publish my table of contents script on github. There it will be much easier to handle all the issues and gives the global SharePoint community the possibilities to contribute to my code.
I know from many people that this script is wide spreader throughout various SharePoint installation. I’m looking forward to improve the code in near future. This table of content script has a real long history for me and I published the first version already for SharePoint 2010. It is still one of my most popular posts.
Let me share some statistics with you:
- SharePoint 2010 – [Enhance Wiki Page Layout by adding a navigational Table of Contents](https://n8d.at/enhance-wiki-page-layout-by-adding-a-navgational-table-of-contents/)
Page Views: 32,016 - Office 365 / SharePoint 2013 – [Revised: Table of Contents for SharePoint Wiki Pages
](https://n8d.at/revised-table-of-contents-for-wiki-pages/)
Page Views: 8,002 - Office 365 / SharePoint 2013 -[How to use: Table of Content – jQuery Plugin](https://n8d.at/how-to-use-table-of-content-jquery-plugin/)
Page Views: 2,289
From now on if you have issues or feature request simply publish them on github. If you like to contribute to this project you are also gladly welcome.
How to use CSS and JavaScript files from Yeoman directly in SharePoint
In the first blog post I explained how to set up your Yeoman development environment. You have now a local web server and you can start your web development. Now lets take a closer look how you can integrate the files on this web serve directly into SharePoint on-premises and Office 365.
Open your project and start the web serve with the command ‘grunt serve’.