Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.
Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.

JSON

VIDEO – PowerApps – Super Gallery

Working with Gallery control in PowerApps can be a limiting way to navigate records.   Many PowerApps include multiple screens with dedicated Gallery screens for navigation.   Helping users locate records (sort, filter, scroll, and search) would be better accomplished with SharePoint Views.   SharePoint List Views are more mature with full features for ad-hoc sort, filter, search and ability to save query (shared/personal) and provide hyperlinks to view ASPX pages.

Why not use SharePoint Views instead of Gallery control?

Turns out we can.   On SharePoint modern pages:

  1. Create new custom column with simple formula “=[ID]”
  2. Apply JSON custom formatting to generate link <A HREF=”…power app URL..ID=1”> which opens PowerApps, giving ID number for a single record to Edit
  3. Share View URL with end users to navigate records (sort/filter/search/paging)

This gives a robust and familiar navigation experience.  Use PowerApps for it’s strength (input validation) and use SharePoint list for it’s strength (navigate records).  Cheers. 

shades_smile

Video

PowerApps – Super Gallery from Jeff Jones on Vimeo.

Screenshots

image
image
image

References

Code – GitHub Repo

Code – SuperGallery-Modern-VIEW-FORM-column

FIXED – Cannot convert the JSON string … contains the duplicated keys ‘Id’ and ‘ID’

Recently I came across the error message below when download a SharePoint 2013 List item REST api call to PowerShell.  The cmdlet ConvertFrom-JSON does an excellent job.  However, it is case sensitive with property names.

The resolution I found was to first string replace (case sensitive) to rename one of the source property names.  Cheers! 

shades_smile

Screenshot – Before

ConvertFrom-Json : Cannot convert the JSON string because a dictionary that was converted from the string contains the duplicated keys ‘Id’ and ‘ID’.

image

Screenshot – After

image

Code

cls

# Config
$web = "http://portal/sites/team"
$list = "Test"

# Digest
$urlView = "$web/_api/contextinfo"
$urlView
$req = Invoke-WebRequest $urlView -UseDefaultCredentials -UseBasicParsing -Method Post
[xml]$ctx = $req.Content
$digest = $ctx.GetContextWebInformation.FormDigestValue
$digest

# List Items
$urlItems = "$web/_api/web/lists/GetByTitle('$list')/getitems"
$json = "application/json; odata=verbose"
$headers = @{"Accept" = $json; "Content-Type" = $json; "X-RequestDigest" = $digest}
$body = '{"query":{}}'
$req = Invoke-WebRequest $urlItems -UseDefaultCredentials -UseBasicParsing -Method Post -Body $body -Headers $headers
$resp = $req.Content

### FIX - Case Sensitive Property Name Replacement ###
$resp = $resp.Replace("Id","Idd")

$json = $resp  | ConvertFrom-Json
$json

References

VIDEO – HTTP Header Client Secret protected Web API

Watch the video below to see a demo of protecting WebAPI with HTTP header and a Client Secret.    By default, new Web API projects lack any security mechanism and are open to any anonymous user.    Protecting Dot Net methods with an IF() statement condition provides a simple security mechanism to ensure only users who know the Client Secret are able to run the API and execute the method.

NOTE – Check out https://www.spjeff.com/2017/10/05/video-azure-ad-protected-web-api-in-an-angularjs-spa/ for more complete WebAPI security with Azure AD.

Cheers!

shades_smile

Video

Screenshots

image

Code

References

Generate TypeScript interfaces from JSON data

Autocomplete JSON property names in JavaScript by generating TypeScript interfaces from sample JSON data.  Check out the below video for a live demo.

Huge win for developer productivity.  No more property name guessing or typos!

 

  1. Copy sample JSON from http://json.org/example.html
  2. Paste into http://json2ts.com/ by @Sorskoot to generate TypeScript interfaces
  3. Add TS file to application working folder
  4. Enjoy autocomplete with Visual Studio Code!
    shades_smile

 

VIDEO

 

SOURCE CODE

© Copyright 2016
@ SPJeff

Return to Top ▲Return to Top ▲