in

Dot Net Mafia

Group site for developer blogs dealing with (usually) Ionic, .NET, SharePoint, Office 365, Mobile Development, and other Microsoft products, as well as some discussion of general programming related concepts.

This Blog

Syndication

Archives

Corey Roth [MVP]

A SharePoint MVP bringing you the latest time saving tips for Ionic, SharePoint, and Office 365.

September 2018 - Posts

  • SPFx Basics: How to create a page anchor

    With React, sometimes the simplest of things are overly complicated.  When it comes to creating a page anchor so your users can jump down to a specific point in the page, this one is no exception.  From our old HTML4 days, you probably remember you create an anchor by doing something like the following:

     <a name="my-anchor-name"></a>

    When you look for the name attribute of an anchor in React though, it's nowhere to be found.  Ultimately this has to do with React's routing system, but that doesn't really do you any good in your SPFx Web Part.  How do you get around it?  One way is to use the Link component from Fabric React.  You'll notice it does have a name attribute but using it isn't quite straight forward.  First, include Link on the page you are building.

    import { Link } from 'office-ui-fabric-react/lib/Link';

    Once you do that, add your Link to the page using the name attribute and a unique identifier.  This will be the destination we are jumping to.

    <Link name={'my-uniqud-id'} href={'#'}></Link>

    You might be wondering why I have the href tag there on the anchor tag.  That is because the Link element renders a Link element as a button instead of an anchor tag if there isn't an href tag.  You can include any value you want there, but a value is required.

    Now to jump to our anchor tag, use the Link tag and include a hash tag and your unique identifier.

    <Link href={'#my-unique-id'}></Link>

    Again this seems like a simple topic, but if you are new to React because you just started SPFx development, this might take you a minute to figure out.

  • SPFx Basics: How to get a query string value

    Contrary to popular belief, I still do development.  In fact, I do quite a bit of development.  In the last couple of years, I have built two mobile platforms as a service using Ionic and Angular.  This node.js based development stack positioned me well to start working with SPFx.  I'm starting up a string of blog posts that help cover the basics that I think that we often overlook in the bigger picture of how to do things with SPFx.  Today's topic is simple: reading a value from the query string.  When I recently looked at this simple scenario, I thought sure I could go back to my JavaScript roots and use location.href but there has to be a better way now right?  The SPFx team thought of that and they included a nice helper class to get you going called UrlQueryParameterCollection.

    Start by including a reference to UrlQueryParameterCollection.

    import { UrlQueryParameterCollection } from '@microsoft/sp-core-library';

    We use the getValue() Like ASP.NET or other languages, you'll usually want to check to see if it has a value before using it.  I then cast it to an integer time after reading the value.

    if (queryParameters.getValue('id')) {
            id = parseInt(queryParameters.getValue('id'));
    }

    Again, this is a simple example, but hopefully it will keep you from going down the path with location.href.  The sp-core-library has all sorts of useful utitlities for you to use such as Environment, Random Number Generators, and logging.  Check it out the next time you start out a project.

2018 dotnetmafia.
Powered by Community Server (Non-Commercial Edition), by Telligent Systems