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



Corey Roth [MVP]

A SharePoint MVP bringing you the latest time saving tips for Ionic, SharePoint, and Office 365.
  • How to properly add an Application Customizer to an existing SPFx Web Part Project

    The yo tools make it rather easy now to add additional web parts and extensions to your SPFx projects.  However, I recently ran across this issue which caused me weeks of pain.  The scenario starts with this. You create a new SPFx project with a web part and deploy it.  Everything works great.  Now, you go and create an application customizer to add your own navigation or footer.  Here is where you start to run into issues.  You can add the application customizer easily enough with yo, but when you increment your version number in package-solution.json and then deploy it, you will find your web part to be missing.  Your application customizer will work fine though.

    All of this trouble comes from package-solution.json.  When you initially create an SPFx project with a web part, no features included in package-solution.json and the web part deployment just works.  However, when you add the application customizer, it creates a feature to deploy the application customizer.  Since there is no reference to the existing web part which means it no longer gets deployed.

       "$schema": "",
       "solution": {
         "name": "web-part-plus-app-customizer-client-side-solution",
         "id": "64380dc5-ce1e-4227-9b47-5ca7f9134d12",
         "version": "",
         "includeClientSideAssets": true,
         "isDomainIsolated": false,
         "features": [
             "title": "Application Extension - Deployment of custom action.",
             "description": "Deploys a custom action with ClientSideComponentId association",
             "id": "82cb0cda-24bf-4aec-87df-c9571f82ad6b",
             "version": "",
             "assets": {
               "elementManifests": [
       "paths": {
         "zippedPackage": "solution/web-part-plus-app-customizer.sppkg"

    Your first inclination might be to add a feature for the web part.  Don't do that!  It will cause numerous issues for you in which SharePoint will load old versions of your code intermittently (see issue #3199).  Instead, you need to add a component id for each web part AND your application customizer into a single feature.  To be clear, you can only have a single feature in an SPFx project.  This is at least in the context of web parts and extensions.  I don't know how this would affect a feature that deploys declarative components such as site columns or content types. 

    Here is what a package-solution.json looks like that will properly deploy a web part and an application customizer. 

       "$schema": "",
       "solution": {
         "name": "web-part-plus-app-customizer-client-side-solution",
         "id": "64380dc5-ce1e-4227-9b47-5ca7f9134d12",
         "version": "",
         "includeClientSideAssets": true,
         "isDomainIsolated": false,
         "features": [
             "title": "Application Extension - Deployment of custom action.",
             "description": "Deploys a custom action with ClientSideComponentId association",
             "id": "82cb0cda-24bf-4aec-87df-c9571f82ad6b",
             "version": "",
             "assets": {
               "elementManifests": [
             "componentIds": [
       "paths": {
         "zippedPackage": "solution/web-part-plus-app-customizer.sppkg"

    Under componentIds you will see two ids.  The first is the id for the Application Customizer.  This isn't the feature id, it's the id in the manifest file for the application customizer.  The second component id is the id of the id of the web part (you also get that from the manifest).

    When I was looking to originally add an application customizer to my web part project, I didn't find a lot of guidance on it.  You can reference my GitHub project with the issue.  The master branch has the issue, the WebPartWithApplicationCustomizer branch does not have the issue.  I've also logged an issue (#3219) for this scenario in GitHub because I think it could affect others as well.

  • Mail could not be received error in Outlook for Mac OS X

    If you are still connecting to an on-premises Exchange Server in Outlook for Mac OS X, you may receive the following error even though your password is correct:

    Mail could not be received at this time.

    The server for account "" returned the error "Login failure: unknown user name or bad password."  Your username/password or security settings may be incorrect.  Would you like to try re-entering your password?

    Screen Shot 2018-12-06 at 10.25.44 AM

    Outlook will continue to prompt you several times as it attempts to download your messages.  The problem is that it usually will never stop even if you click the option Remember the password in my keychain.  In this state, you can usually get it to give you your mail if you enter your password enough times, but it won't stay connected and you won't be notified when you get new e-mail.

    Screen Shot 2018-12-06 at 10.25.55 AM

    This has issue has been occurring for me since at least August on both of my Macs and finally I got frustrated enough to try and resolve it.  I searched in the Internet and found a few references to the error but no solution.  I started by reaching out to my client's IT support and seeing if they ever saw the issue but surprisingly they never had.  Maybe it's only an issue with the Office Insider Fast Ring.

    Then, I used the Contact Support option in the Help menu of Outlook.  I provided my log information and described the issue.  I had a response in under 5 minutes.  It turns out this is a known issue and there is no estimate for a fix on it.  Here is a snippet of the response I received.

    Please accept our apologies. This issue has been reported and we are aware and investigating. I also added your ticket to the report to get it fixed the soonest possible! We are sorry, we have no information on when a fix will be rolled out. We appreciate your understanding and patience. 

    The good news is that this is a known issue.  The bad news is they don't have any idea on resolution yet.  Unfortunately, this is an issue affecting an on-premises environment which means its priority for resolutions is probably quite low.  Keep your fingers crosses if you are chasing this issue.

  • Use the new IE11 Polyfill package with PnPJS 1.2.4

    Recently, I posted about the error (TypeError: Object doesn't support property or method 'from') you received in Internet Explorer 11 (IE11) when you didn't include the necessary polyfills for PnP JS to work.  To resolve the error, previously you had to include the following Polyfills to provide support for things like proxy, fetch, and map.

    import "core-js/modules/es6.promise"

    import "core-js/modules/es6.array.iterator.js"

    import "core-js/modules/es6.array.from.js"

    import "whatwg-fetch"

    import "es6-map/implement"

    Now with PnPJS 1.2.4, this has been simplified a bit with a new single package.  First, install the package @pnp/polyfill-ie11.

    npm install --save @pnp/polyfill-ie11

    Now remove all of the previous imports from your web part class and replace it with the following single import.

    import "@pnp/polyfill-ie11";

    Now, give your code a try inside Internet Explorer.  All of your PnPJS calls should work normally.  What's nice about this version of the Polyfill si that we have support for SearchQueryBuilder which I believe wasn't there before.

    You can read more about the new Polyfill package on the PnPJS site.

  • Become a beta tester for the Office Apps on iOS

    Apple recently gave developers the ability to sign up testers using just a URL in TestFlight.  Previously, it required the developer to manage a list of E-mail addresses which quickly becomes unwieldy.  If you are interested in testing pre-release versions of Word, Excel, Outlook, and more then check out the links below.  You first need to install the TestFlight app on your iOS device.  This is how you install pre-release apps in iOS.  In fact, all of the links you see today need to be accessed directly from your iPhone or iPad.  Click on any of the links below to get started.

    As usual, if you install pre-release software, you assume all risk such as the app not working, crashing, or worse.  Another thing to remember is that TestFlight only allows 10,000 users in a beta test.  Therefore,you may not be able to join the test at some point when either they run out of invitations or MIcrosoft closes the program early.

  • Building with Ionic 4.0 Beta? Be sure and update to Node v10

    We were discussing build times in #ionic-questions Slack channel today and Mike noted that you should be on Node v10.  Apparently, the @LTS has some bugs that are affecting performance.  If you haven't upgraded and plan to do any work with Ionic v4.0, I recommend it.  It significantly improves build and refresh tine.  Specifically, I installed v10.12.0. 

    Posted Oct 16 2018, 02:47 PM by CoreyRoth with no comments
    Filed under:
  • Fixing horizontal scrolling in your DetailsList using ScrollablePane and Sticky

    The  Fabric React DetailsList component is a great way to display your tabular data when building an SPFx web part.  It's nice, but if you have a lot of rows in your list, you might need a sticky header so that you can see which column you are looking at.  As a developer building out this scenario for the first time, you might run into guidance and a code sample from the ScrollablePane documentation.  I found this hard to find because I would expect this example to be linked to the DetailsList documentation.  This will get you up and going fairly quickly.  However, when you are implementing it using the code sample, you'll find that there isn't an event called onScroll on DetailsList when you are building an SPFx web part.  That's because that event doesn't exist in Fabric React 5.  Maybe you proceed anyways and notice that the sticky header is working just fine. At least you thogught it was working.

    Here's where the problem starts.  if you have a lot of columns (or your users' screen resolution is very low), you may need to deal with horizontal scrolling.  Nothing good ever comes from horizontal scrolling.  When you need to horizontally scroll, a scrollbar appears in the sticky header.  Great.  That's exactly what you wanted.  The problem is the rows in the grid, don't scroll with it.  Now you have columns that don't line up to the data.  That's a problem. 

    When trying to fix it, you might run into the following issue on GitHub.  This pointed me in the right direction.  The answer is to react to the scroll events and set the scrollLeft property to match.  You need to create a new function to listen to the scrolling of the div element.  This effectively responds to the scrolling of the div element where your content is and sets the scroll of the Sticky to match it.  It's pretty simple.

    private handleScroll(event) {
    let element = document.querySelector("[class*='stickyAbove-']");
    if (element != null)
    element.scrollLeft =;

    Then all you need to do is add the event to your div element that contains the ScrollablePane.

         height: '1000px',
         position: 'relative',
         maxHeight: 'inherit'

    This helped me to part of the solution but not all of it.  This only handles when the user scrolls the data using the scrollbar at the bottom.  What we need to add to it is an event to respond to when the user scrolls the Sticky element.  I did this by registering an event handler in componentDidMount.  I used pure JavaScript in my example, but you could reference the Sticky component using componentRef if you wanted.

    public componentDidMount(): void {
    let stickyElemrent = document.querySelector("[class*='stickyAbove-']")
    if (stickyElemrent != null) {
    stickyElemrent.addEventListener('scroll', this.hnadleStickyScroll);

    In my event handler, we have similar code except that we are getting a reference to the DetailsList element.

     private hnadleStickyScroll(event) {
    let gridElement = document.querySelector("[class*='ms-DetailsList']");
    if (gridElement)
    gridElement.scrollLeft =;

    Once you add this, you should be able to scroll your rows of content or the sticky header horizontally and they will stay in sync.  If you have run into this issue, give it a try.

  • TypeError: Object doesn't support property or method 'from' with PnPJS and Internet Explorer 11

    You just built this amazing SPFx web part and it works great in modern browsers.  You then go to test (or even worse your users go to test) and you find that nothing works.  After examining your logs, you start finding the following error message.

    TypeError: Object doesn't support property or method 'from'

    What does that mean?  Basically, all of your calls to SharePoint made through PnPJS are failing.  You start to panic as you realize everything you built doesn't work in IE11.  Not to worry though, this can be fixed.  After doing some research, you might stumble upon this issue reported in GitHub.  The reason for this is that in version PnPJS 1.2.0, they dropped direct support for Internet Explorer.  That doesn't mean you are out of luck though and you need to go tell the client the solution you spent weeks on won't work for half their users.  You just need to add the right polyfills to your project and you are back in business.

    Just add the following polyfills to the relevant part of your project.

    import "core-js/modules/es6.promise"

    import "core-js/modules/es6.array.iterator.js"

    import "core-js/modules/es6.array.from.js"

    import "whatwg-fetch"

    import "es6-map/implement"

    I find that if you are developing an SPFx web part, you can just add this to the web part's class (not the React component).  Add them anywhere near the top of that class and your IE users should be able to use your web part as intended.

  • Hands on with OneDrive File-On-Demand for Mac

    Today, Microsoft released the long waited Files-On-Demand support in macOS Mojave. As you might know Files-On-Demand (or FOD) has been available in Windows 10 for a while but it has been a featured that we have been waiting for in macOS for quite some time. Now at Ignite, Microsoft is giving you the opportunity to try it out. In order to try it out, you first have to upgrade to macOS Mojave 10.14. The latest version of macOS just came out today on September 24th and is now available to download. If you are running on a beta version still, you can try it out as well.

    The second thing, you need to do is make sure you are in the Insiders Ring for Office and / or OneDrive. If you aren’t sure, download the script from the installation site. It’s a bash script, so you will need to make the script executable. If you aren’t familiar with this process, you have to get back to the Unix / BSD roots of OS X. Open a new Terminal, and go to the directory where you downloaded the script and then execute the following command:

    chmod u+x ./

    Screen Shot 2018-09-24 at 1.32.24 PM

    If you’ve had OneDrive installed on your Mac before, you’ll need to delete some cache files in the following folder: ~/Library/Caches/OneDrive. Delete *.json in that folder.  I didn't actually do this step, but you may need to.

    Now you can install the OneDrive client. Download the client from the install link and then go through the install process. Launch OneDrive when it’s complete. If you run into issues, there are a few troubleshooting tips about force closing Finder. I didn’t have to do that but you may need to on your machine.

    If you have enabled the new macOS Mojave Dark Mode, the first thing you might notice is that the OneDrive client respects that and will also show using Dark Mode. Good job, OneDrive engineering team! That makes for a nice experience.

    Screen Shot 2018-09-24 at 1.40.33 PM

    I had to setup one of my Office 365 accounts on this particular machine but that’s good because it gave me an idea for the new account setup experience. After you sign in, you’ll get this new dialog that explains the icons that you will see in Finder.  Cloud = online only, checkbox = the file is on disk.  This is helpful, because I’ve always had trouble remembering what the icons mean in FOD for Windows 10.

    Screen Shot 2018-09-24 at 1.11.55 PM

    For existing accounts, you may need to turn on Files-On-Demand manually. I didn’t have to in my case, but it’s good to know where to go. Go to Preferences in OneDrive and then look for the Files-On-Demand section. You can see verify whether it has been turned on or not.

    Screen Shot 2018-09-24 at 2.27.40 PM

    Now we can go find our OneDrive folder inside Finder and see how it all works. When I open one of my synced folders, you’ll notice that I am now seeing files that I have not downloaded yet indicated by the cloud icon next to each one. That’s right, I am seeing files that are online, but not yet downloaded.

    Screen Shot 2018-09-24 at 1.45.20 PM

    Clicking on an online file will immediately download it and you can access it like you had it all along. This is what we have been waiting for. If you right click on a file, you now see the option to Always keep on this device. This is how you tell OneDrive to keep that file on your device for offline use.

     Screen Shot 2018-09-24 at 1.43.28 PM

    Once you do that, you’ll notice the icon changes from a cloud to a check mark.

    Screen Shot 2018-09-24 at 1.44.10 PM

    I’m looking forward to using this on a day-to-day basis. This should make working with OneDrive files online and offline much easier with macOS Mojave 10.14.

  • 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.

  • How to: Default a date field to today's date in PowerApps

    When you add a date field in PowerApps, I find that the current default date of 12/31/2001 is not very useful for me.


    Changing the default date is not hard but you have to know where to look.  First, you have to realize a date field is actually three different controls DateValue, HourValue, and MinuteValue.  The default has to be set on each one. 

    Start by clicking on the Date Value where is says 12/31/2001.  In the properties, go to the Advanced Tab and click the Unlock button. Now, iIn the property selector, look for DefaultDate and change the value to Now().


    You'll notice the date changes to today's date now.  You can also use date manipulation functions if you want to choose another date.  Now, if you don't like the time defaulting to midnight, we can change that too.  Click on the HourValue and choose Default in the property selector.  Notice the formula it has.


    Let's change that to use today's date and time to get the default value with the following formula.

    Text(Hour(Now()), "00")

    You'll notice the hour has now updated.  PowerApps may apply a region identifier to your string when you update it.  That won't mess anything up.


    Now repeat the process for the MinuteValue with the following formula

    Text(Minute(Now()), "00")


    That's all there is to it.  It may take a few extra steps than you expected but the process is pretty easy to follow.

  • Getting started with the new Microsoft Teams & Skype for Business Admin Center

    The new Microsoft Teams & Skype for Business Admin Center is starting to roll out to first release.  This post will show you some of the highlights and how to get started.  First, you have to know where to find it.  Currently, the Microsoft Teams & Skype for Business Admin Center does not show up in the list of Admin Centers on your Tenant.  To find it in your Admin Center, go to Settings -> Services & add-ins and then Microsoft Teams


    If the new admin center has been provisioned on your tenant, you will see a message at the top warning you that some settings are only available in the new admin center.


    Click on the link to take you to the new admin center.  It will take you to the URL below.

    The will take you a dashboard that looks a bit incomplete for the moment.  It lets you quickly get to your users as well as some help videos.


    On the Users page, you can see a dashboard of users, phone numbers (if any) and that one policy has been defined.  It looks like the RestrictedAnonymousAccess policy is assigned to everyone by default.


    When you click on a user, you see a screen with some general information including the conference bridge and phone number (if assigned).  Here you can reset the conference ID or PIIN, set policies, and set defaults.


    If you click Edit next to Assigned policies, it will let you change the Teams Messaging policy but you cannot change the Teams Meeting Policy yet.  The option simply isn't present when you click on it.  I suspect that will come later in the future.


    If you click Edit next to Microsoft Teams, you can set the Default calling app and the Default chat appEach one has a value of Teams, Skype for Business, or Default.  However, when you try to change the Default calling app, you get an error:

    This combination of preferred applications isn't allowed.


    I suspect this will be resolved in the future as more of the Interop features on the roadmap are launched.

    Under Meetings, you can now manage your conference bridge phone numbers.  This is a welcome change from the old Skype for Business audio conference settings.


    Clicking Settings takes you to bridge settings include entry and exit notifications and PIN length.


    In reality, not that many settings have been migrated to the new admin center yet.  The most noticeable move will be the Messaging settings.


    Here you will see the new expanded Teams messaging policy with the ability to set more than one policy now.


    You can control External Access under Org-wide settings.  This is where you can turn off communication to external Skype (consumer) users.  By the way, Secure Score actually recommends you turn off communication to Skype users now.


    Under Guest Access you can control all of the settings that you allow guests of your Teams to do.


    That's all of the new settings for now.  Like the new SharePoint Admin Center, many of the legacy settings will take some time to migrate over to this new experience.  If you can't find the setting you are looking for, go back to the Skype for Business admin center or the Teams Settings menu.

  • Using Cloud Storage to create virtual folder hierarchies in Microsoft Teams

    One particular feature in Microsoft Teams that has been a success in my organization is the use of Cloud Storage to provide a hierarchy in Microsoft Teams. If you are not familiar with what I am talking about, I am referring to the Add cloud storage link you see in the Files tab of a Team.  You might have glossed over this link since you may be fully on Office 365, but this particular link has a lot of power.


    Clicking that button will take you to a screen asking you which cloud storage provider you want to use.  In our case, we want to use SharePoint.


    However, you may have different options.  That's because they can be configured in the Office 365 Admin center under Settings -> Services & Add-ins -> Microsoft Teams -> Custom cloud storage.


    Note, how most of mine are turned off.  Google Drive is about to join the off-club as well for us.  Having just migrated my organization off of G Suite this cloud storage provider approach has acted as a good transition since Google makes use of the virtual folders concept quite a bit.

    Now back when the user chooses SharePoint, it will present you a list of sites that it thinks might be relevant to you.  However, you can also paste in a link from any SharePoint site you have.  Don't worry about trimming the link or getting it exact either.  You can paste the URL of the site root, a document library, whatever.  Teams will figure out the site you want.


    Paste your URL,  select the site, and then click Next.  Now pick the document library you want to link in.


    Finally click Add Folder.

    You will be returned to the Files tab.  This part is a bit buggy because while the tab does refresh, it doesn't show you your new link.  Just switch off the tab and click back on the Files tab and you will then see your new link.


    It will create a link to the child site with a special SharePoint folder icon.  It names your folder based off of the site name and document library name.  Unfortunately, you don't have any control of that name and you can't rename it.

    When you click on the link, it will let you drill down into the document library of that site you linked in.  Notice it even maintains the bread crumbs from the Team you came from.


    This is a great way to bring links to content from all over your organization into one central location.  It's pretty useful I think.

    What's the downside?

    I think the only other downside is that you can only see these links from the Teams client.  If you go into SharePoint directly, you won't see those links in your document libraries.  It's still pretty useful though.  Give it a try!

  • Understanding Site Collection creation with Microsoft Teams

    When you create a new site Microsoft Team, it creates a site collection for you rather quickly.  In general, it's ok to start working with this site collection right away.  You can upload files or do whatever you need.  However, you might have noticed before that certain menus are not available in Site Settings right away. and you can't do other administrative actions such as "Change the Look".  I started looking into this after I created a new Team and then started using Sharegate to move files there right away.  Sharegate gives me an error message that I don't have the necessary permissions to use Insane Mode.  This is no fault of Sharegate, something clearly wasn't ready yet in Office 365.

    Screen Shot 2018-03-15 at 10.02.07 AM

    I created the Team so shouldn't I be a site collection administrator?  I was confused because this was right after I successfully migrated files to a different Team that I had created last week.  It turns out even though I created the Team, I am not a Site Collection owner…yet.  The administration options are simply not there. That's because you don't have access yet. 

    I don't fully understand it, but after digging around in PowerShell, I do understand it a bit more now.  I went into SharePoint Online Management Shell and used Get-SPOUser on the site. 

    Get-SPOUser -site | Select LoginName, IsSiteAdmin

    Looking at the results, you can see that no one is a site collection admin.

    Screen Shot 2018-03-15 at 10.01.40 AM

    I suspected, I needed to wait and see what happens.  I knew my other Teams worked fine, so hopefully this one will work soon as well.  I came back about 40 minutes later, just shortly past the hour.  I then ran the same PowerShell command.  This time, the results were different.

    Screen Shot 2018-03-15 at 10.02.42 AM

    Notice how the GUID named account, ce738800-2aff-4c9f-b2cd-2b0521aa8a77_o, now is listed as a site admin?  Interesting.  After comparing the results of another Team, my account wasn't listed there as a Site Collection admin but everything there worked fine.  I decided to go back and try my migration.  Sure enough it worked.  I could use Change the Look now to change my site theme and all of my links were available on the Site Settings page now too. 

    I'm pretty sure what happens is that there is a job that runs once an hour at the top of the hour (although I am not really sure) that goes and sets permissions after the fact whenever you create a Team.  If you run into this issue, just be patient and everything should work shortly.

  • How to: Use QnA Maker with Azure Function Bots

    I have been working with bots a bit lately and wanted to share some of my experiences.  QnA Maker makes it really easy to built a bot to serve up a knowledge base based on simple question and answer pairs that you populate it with.  After you publish your knowledgebase with QnA Maker, it's a bit tricky to figure out what to do next.  When you click Publish, you get a screen like this.

    Screen Shot 2018-03-09 at 10.19.30 AM

    While this is useful information if you were going to interact with your bot directly via REST.  It doesn't tell you how to turn this into a bot.  In fact if you look for information on how to do this with an Azure Functions Bot, you'll find very little on it.  That's because all of the documentation and examples out there tell you how to do it with Bot Framework / Bot Service which is deprecated in lieu of the new Azure Functions Bot or Web App Bot. That's why I created this post to walk you through it.

    Start by creating a new Functions Bot or Web App Bot.  The difference really just depends on how you want to pay for your consumption.  If you are just experimenting, I would probably go with a Functions Bot.  You can find both under AI + Cognitive Services.

    Screen Shot 2018-03-09 at 10.37.34 AM

    You'll need to give your bot a unique name.  You'll select the typical things like the Location, Azure Storage account, and Resource Group.  The key things you want to set are the Pricing tier and the Bot template.  For Pricing tier use F0 which includes 10K Premium Messages

    Screen Shot 2018-03-09 at 10.40.47 AM

    For the Bot template, click on it choose either C# or Node.js and be sure and choose Question and Answer.

    Screen Shot 2018-03-09 at 10.40.13 AM

    You also want to set your Hosting Plan.  I am going with Consumption Plan but this is really up to you.

    Once your bot is provisioned, we now need to adjust a few settings.  This part used to be clearer with the old Bot Service stuff.  Click on Application Settings.

    Screen Shot 2018-03-09 at 10.46.35 AM

    Now we need a few values from QnA Maker.  Remember the publish screen?  It has the values we need.  We need the values for QnAKnowledgebaseId and QnASubscriptionKey.

    Screen Shot 2018-03-09 at 10.19.30 AM

    You can find QnAKnowledgebaseId in the GUID of the first line of the POST statement.  So in this case, mine is 73d71520-4c66-45ee-8fbf-acfeef3d1b05.

    You can find QnASubscriptionKey in the third line Ocp-Apim-Subscription-Key.  In this case, mine is 9343c969f7ab4ac28b559c87ae6eb3d0.

    Now we need to set these values in our Application Settings at the very bottom of the list.

    Screen Shot 2018-03-09 at 10.53.32 AM

    That's all you need to do.  Once you have configured those settings, your QnA bot is ready to go.  Try it out for yourself!

    Posted Mar 09 2018, 10:55 AM by CoreyRoth with no comments
    Filed under: ,
More Posts Next page »
2018 dotnetmafia.
Powered by Community Server (Non-Commercial Edition), by Telligent Systems