User Access to SharePoint Online Using SharePoint Designer

I ran into an issue getting access to a SharePoint Online site page with SharePoint Designer: I had to create a workflow on that site, however I was constantly prompted for credentials. After some hours of troubleshooting with the Microsoft IT help team, we found teh following: we have been capable of pinpoint the basis cause.

Summary of Issue:

The purchaser supplied webweb page series administrator get admission to to my account the use of my paintings email. In different words, I became capable of get admission to the webweb page series as an administrator at the same time as being an outside person on their Azure Active Directory. Everything became best thru the web, however as soon as I attempted to connect with the equal webweb page with SharePoint Designer, I could get continuous (very annoying) prompting.are 

 

.

The Office 365 login prompt kept coming back even though I was a site collection administrator

Steps to Consider When Troubleshooting SharePoint Designer

The below steps are helpful when you are encountering “weirdness” using SharePoint Designer. They did not work for my specific case (and you will see why shortly), but together they create a good troubleshooting checklist to use before you should consider more advanced support. You will likely be asked to do the following steps when you first connect with Microsoft IT support, so completing them and preparing your answers ahead of time could save you 20–30 minutes of discussion with a technician.

• Update SPD to the latest version, or uninstall/reinstall using the latest official link
• Install SharePoint Designer SP1 1
• Clear the SharePoint Designer cache from the following directories: %USERPROFILE%\AppData\Local\Microsoft\WebsiteCache AND %APPDATA%\Microsoft\Web Server Extensions\Cache
• Log out of the Account tab on SharePoint Designer

Why Is This Happening?

First off, the site collection I was given access to was NOT the root site collection and that I had no access/privileges provided there. As you probably already guessed, this was the main cause of my issue. When you are connecting as an external user, SPD will try to authenticate you from the root site collection. Without access to the root site collection, you will fail the authentication request even though you are trying to get to another site collection.

Solution: 

Option 1. Request read access for the same external user account you are using, but this time do so from the root site collection. Depending on the organization’s policy, the data hosted, and the IT team you are working with, you may get that granted. Once you do gain access to the root site collection, you will be able to access the initial site (the one for which you are listed as site collection administrator) via SPD.

Option 2. Request a SharePoint license account (if the organization does not wish to pay for an additional Office 365 license) and set that new account as the site collection administrator of the desired site collection. With this option you will be able to access SPD at the non-root site collection without having access to the root site collection.

Edge and Chrome browser Developer Utilities That I Need to Know

Edge and Chrome browser Developer Utilities That I Need to Know

Every fashionable internet browser normally gives features for devs to debug internet apps. We use the chrome console to execute short code snippets for debugging and experimental purposes. For supporting to write down code snippets at the console productively, Chrome gives numerous productiveness-centered shortcuts just like the Bash interpreter, which reinforces developer productiveness on GNU/Linux terminals. We can use those Chrome console software shortcuts to hurry up internet utility debugging-associated tasks (i.e., Getting the chosen DOM detail withinside the inspector).

Speed up Selections with JQuery Selectors

Chrome lets you use $ syntax on the console even if you don’t use the JQuery library. On the Chrome console, $ works as a shortcut for the document.querySelector method by letting you instantly query for one element:

$('.item-01')

The above code snippet prints the first DOM node that has the item-01 class name. Similarly, the $$ shortcut triggers the document.querySelectorAll method and returns more than one element. For example, the following code snippet prints all <h1> elements:

$$('h1')

You can also select DOM elements based on XPath expressions as follows:

$x('/html/body/div')

Console API Shortcuts

Every browser and JavaScript runtimes like Node.js offer a fully-featured console API for developers to use in web app codebases for debugging purposes. You can log some messages on the browser console when unexpected issues occur. Then, you can analyze them to diagnose critical issues during developer or user testing. console.log, console.error, and console.warn. are commonly used console logging methods.

Chrome offers console-only, shorthand function names for several console APIs to boost debugging productivity. The dir function triggers the console.dir API method, so you can use it to print key-value data in objects. This is a good mechanism to print DOM element properties when the console prints an element with its HTML code by default:

Using the dir utility function in the Chrome console, a screen recording by the author

Similarly, you can use the table function to use the console.table method. Also, the clear function invokes the console.clear method and clears the browser console.

The console API also offers two non-standard methods to start and stop the performance profiler. Chrome offers profile and profileEnd console function shortcuts to invoke these profiler-specific console API methods, as shown in the following preview:

Starting and stopping the DevTools profiler with console utilities, a screen recording by the author

Shortcuts for JS Object API

As a modern general-purpose programming language, JavaScript offers a fully-featured, pre-loaded standard library for almost all development requirements. JavaScript offers you a productive way to work with objects with a JSON-like object concept and provides an inbuilt JSON serializer/deserializer. Every web developer knows about Object.keys and Object.values methods that help us to extract keys and values from JavaScript objects. Chrome console utilities implement keys and values inbuilt function shortcuts and lets you productively use these frequently used Object API methods during debugging activities.

Assume that we need to inspect the following object’s keys and values separately:

const doc = {
  id: 100,
  title: 'My document',
  size: 'A4',
  authorId: 100
}

You can print only the keys of the above object using the keys function, as shown in the following preview:

Using the keys function to extract object keys, a screen recording by the author

The values function offers a productive way to print all values of a specific object as follows:

Using the values function to extract object values, a screen recording by the author

The following story explains new browser APIs that you should know as an experienced web developer:

Set Breakpoints and handle code inspections with shortcuts 

The modern web app debugging process typically involves using breakpoints and DOM inspections. Breakpoints help you debug JavaScript, and DOM inspections help you analyze HTML and improve CSS-based stylings. To set up breakpoints, we can use either the DevTools interface or the debugger JavaScript statement. Chrome console also offers productivity shortcuts to set up breakpoints.

Assume that the following function is loaded and available in the current console context:

function genArr(n) {
  let sq = n ** 2;
  sq = Math.min(sq, 1000);
  let arr = [...new Array(sq).keys()];
  return arr;
}

Assume that you need to set a breakpoint within the genArr function. You can activate automatic breakpoints by calling the debug function on the console:

debug(genArr)

Then, DevTools will automatically add a breakpoint for the genArr function:

Using the debug utility function to activate automatic breakpoints, a screen recording by the author

Now, an automatic breakpoint halts code execution when the genArr function gets executed. It’s possible to deactivate automatic breakpoints with the following function call:

undebug(genArr)

The above approach lets you set up breakpoints and browse functions. What if you need to check function sources without activating automatic breakpoints? The inspect function helps you navigate to a specific function. It also prints the source of the particular function on the console, as shown in the following preview:

Checking function implementations with the inspect function, a screen recording by the author

You can use the same function to inspect DOM elements. For example, the following code snippet starts inspecting the currently active element:

inspect(document.activeElement)

Check Function Calls

There are several ways to detect function calls while doing a debugging task. Some developers typically use the console.log statement manually by printing some values on the console for detecting function calls. Meanwhile, some developers set up breakpoints. These approaches have several drawbacks. If a specific function gets called thousands of times, you will have a time-consuming job with breakpoints. On the other hand, you have to edit sources manually if you wish to use console.log-based approach.

Chrome console utilities offer monitor and unmonitor inbuilt console functions to productively monitor function calls without using breakpoints or editing source files manually.

Assume that you need to monitor the previous genArr function execution:

function genArr(n) {
  let sq = n ** 2;
  sq = Math.min(sq, 1000);
  let arr = [...new Array(sq).keys()];
  return arr;
}

First, activate the monitoring feature for the particular function as follows:

monitor(genArr)

Now, every call that comes to the genArr function is monitored and printed on the console with incoming arguments:

Monitoring function calls on Chrome console, a screen recording the author

It’s possible to deactivate function monitoring for the genArr function with the following code snippet:

unmonitor(genArr)

Working with Events Within the Console

DevTools offers several ways to detect browser events. It lets you set up event breakpoints that set source breakpoints automatically when a specific event gets triggered. Besides, it provides a feature to browse global events attached to the window object. What if you like to detect and browse web app events directly from the console?

Chrome console utilities offer the getEventListeners inbuilt function to find registered event listeners of a specific object. For example, the following code snippet prints all event listeners attached to the current active DOM element object:

getEventListeners(document.activeElement)

The above utility function helps us browse registered event listeners, but how can we know when a specific event gets triggered without using the GUI-based event listener breakpoint feature in DevTools GUI?

The monitorEvents and unmonitorEvents shortcut functions let us monitor browser events based on JavaScript objects that capture events.

Look at the following code snippet:

monitorEvents(document.activeElement, 'click')

Once you enter the above code snippet on the console, you can find all click events of the currently active element on the console:

Monitoring events from the browser console on Chrome, a screen recording by the author

It’s possible to deactivate event monitoring with the following code snippet:

unmonitorEvents(document.activeElement)

Variable syntactic sugar in Console 

Every command-line interpreter typically offers various productivity-focused shortcuts to speed up development tasks. For example, the Bash interpreter offers the $? special parameter to get the exit code of the previous command’s process. Similarly, the Chrome console interpreter offers several shorthand variables for web app debugging tasks.

The $_ shorthand variable returns the return value of the previous expression executed on the console.

Look at the following example:

Working with the $_ shorthand Chrome console variable, a screenshot by the author

Earlier, we used the document.activeElement property and the $ query selector shortcut to refer to some DOM elements. However, developers tend to select DOM tree elements within the elements tab (inspector) without changing the focus of the real rendered DOM during debugging. So, if there is a shorthand variable to get the currently selected DOM element in the inspector, we can productively use it on the console without using document.activeElement or $-based selector syntax.

Chrome lets you refer to the selected DOM element in the inspector with the $0 shorthand variable. Assume that you need to change a data attribute of the selected DOM element via the console. You can do it as shown in the following preview:

Using the $0 shorthand variable on the Chrome console, a screen recording by the author

Let me reveal the bonus debugging tip of this article. You can use the copy function to copy a deserialized JavaScript object into the system clipboard.

Look at the following sample code snippet that copies a sample JavaScript object into the system clipboard:

const doc = {
  id: 100,
  title: 'My document',
  size: 'A4',
  authorId: 100
};
copy(doc);