Skip to content

Commit a18467f

Browse files
VesaJuvonenVesaJuvonen
committed
SPFx 1.20 beta sample solutions
1 parent 66ffb8a commit a18467f

File tree

85 files changed

+60488
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

85 files changed

+60488
-0
lines changed

‎samples/BasicCard-HTML-QuickView/.eslintrc.js

Lines changed: 352 additions & 0 deletions
Large diffs are not rendered by default.

‎samples/BasicCard-HTML-QuickView/.gitignore

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
6+
# Dependency directories
7+
node_modules
8+
9+
# Build generated files
10+
dist
11+
lib
12+
release
13+
solution
14+
temp
15+
*.sppkg
16+
.heft
17+
18+
# Coverage directory used by tools like istanbul
19+
coverage
20+
21+
# OSX
22+
.DS_Store
23+
24+
# Visual Studio files
25+
.ntvs_analysis.dat
26+
.vs
27+
bin
28+
obj
29+
30+
# Resx Generated Code
31+
*.resx.ts
32+
33+
# Styles Generated Code
34+
*.scss.ts

‎samples/BasicCard-HTML-QuickView/.npmignore

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
!dist
2+
config
3+
4+
gulpfile.js
5+
6+
release
7+
src
8+
temp
9+
10+
tsconfig.json
11+
tslint.json
12+
13+
*.log
14+
15+
.yo-rc.json
16+
.vscode

‎samples/BasicCard-HTML-QuickView/.vscode/launch.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"name": "Hosted workbench",
6+
"type": "msedge",
7+
"request": "launch",
8+
"url": "https://{tenantDomain}/_layouts/workbench.aspx",
9+
"webRoot": "${workspaceRoot}",
10+
"sourceMaps": true,
11+
"sourceMapPathOverrides": {
12+
"webpack:///.././src/*": "${webRoot}/src/*",
13+
"webpack:///../../../src/*": "${webRoot}/src/*",
14+
"webpack:///../../../../src/*": "${webRoot}/src/*",
15+
"webpack:///../../../../../src/*": "${webRoot}/src/*"
16+
},
17+
"runtimeArgs": [
18+
"--remote-debugging-port=9222",
19+
"-incognito"
20+
]
21+
}
22+
]
23+
}

‎samples/BasicCard-HTML-QuickView/.vscode/settings.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// Place your settings in this file to overwrite default and user settings.
2+
{
3+
// Configure glob patterns for excluding files and folders in the file explorer.
4+
"files.exclude": {
5+
"**/.git": true,
6+
"**/.DS_Store": true,
7+
"**/bower_components": true,
8+
"**/coverage": true,
9+
"**/jest-output": true,
10+
"**/lib-amd": true,
11+
"src/**/*.scss.ts": true
12+
},
13+
"typescript.tsdk": ".\\node_modules\\typescript\\lib"
14+
}

‎samples/BasicCard-HTML-QuickView/.yo-rc.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"@microsoft/generator-sharepoint": {
3+
"plusBeta": false,
4+
"isCreatingSolution": true,
5+
"nodeVersion": "18.20.4",
6+
"sdksVersions": {
7+
"@microsoft/microsoft-graph-client": "3.0.2",
8+
"@microsoft/teams-js": "2.24.0"
9+
},
10+
"version": "1.20.0-dev.104",
11+
"libraryName": "html-quick-view",
12+
"libraryId": "d2a2e20d-5fa9-466b-9e6b-fb95a9d0d07f",
13+
"environment": "spo",
14+
"packageManager": "npm",
15+
"solutionName": "HTMLQuickView",
16+
"solutionShortDescription": "HTMLQuickView description",
17+
"skipFeatureDeployment": true,
18+
"isDomainIsolated": false,
19+
"componentType": "adaptiveCardExtension",
20+
"aceTemplateType": "Generic"
21+
}
22+
}

‎samples/BasicCard-HTML-QuickView/README.md

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
# HTML Quick View demo
2+
3+
## Summary
4+
5+
This is baseline demo for the using HTML Quick Views in Viva Connections Adaptive Card Extensions. This is an optional rendering capability introduced in the SharePoint Framework version 1.20. HTML powered Quick Views can be more advance vs the adaptive card powered quick views.
6+
7+
By deafault ACE template solution does not include support for the SCSS definitions. You need to include `@microsoft/sp-office-ui-fabric-core` package to the solution to be able to to use SCSS powered styles as demonstrated in this solution.
8+
9+
![picture of the ace in action](assets/preview.png)
10+
11+
![picture of the ace in action](assets/mobile-preview.png)
12+
13+
## Used SharePoint Framework Version
14+
15+
![version](https://img.shields.io/badge/version-1.20.beta.0-yellow.svg)
16+
17+
Notice that this version is NOT available publicly and solution will be updated to use public 1.20 preview version as that's available. Code is currently provided as a reference point to adopt, but you cannot use that externally.
18+
19+
## Applies to
20+
21+
- [SharePoint Framework](https://aka.ms/spfx)
22+
- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
23+
24+
> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
25+
26+
## Prerequisites
27+
28+
- None
29+
30+
## Solution
31+
32+
| Solution | Author(s) |
33+
| ----------- | ------------------------------------------------------- |
34+
| BasicCard-HTML-QuickView | Vesa Juvonen (Microsoft) |
35+
36+
## Version history
37+
38+
| Version | Date | Comments |
39+
| ------- | ---------------- | --------------- |
40+
| 1.0 | August 20, 2024 | Initial release with preview packages |
41+
42+
## Disclaimer
43+
44+
**THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
45+
46+
---
47+
48+
## Minimal Path to Awesome
49+
50+
- Clone this repository
51+
- Ensure that you are at the solution folder
52+
- in the command-line run:
53+
- **npm install**
54+
- **gulp serve**
55+
56+
## Features
57+
58+
This extension illustrates the following concepts:
59+
60+
- Using HTML Quick Views in the Adaptive Card Extensions
61+
- Using SCSS definitions in the HTML Quick Views (you'll need to include `@microsoft/sp-office-ui-fabric-core` package)
62+
63+
## References
64+
65+
- [Introduction to HTML Quick Views with SPFx in Viva Connections cards](#)
66+
- [Getting started with SharePoint Framework](https://aka.ms/spfx)
67+
- [Overview of Viva Connections Extensibility](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/overview-viva-connections)
68+
- [Microsoft 365 & Power Platform Community](https://aka.ms/community/home) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development

‎samples/BasicCard-HTML-QuickView/assets/mobile-preview.png

107 KB
Loading

‎samples/BasicCard-HTML-QuickView/assets/preview.png

111 KB
Loading

‎samples/BasicCard-HTML-QuickView/assets/sample.json

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
[
2+
{
3+
"name": "pnp-sp-fx-aces-basiccard-html-quickview",
4+
"source": "pnp",
5+
"title": "HTML QuickView basic demo",
6+
"shortDescription": "This is a baseline solution to demonstrate the HTML powered Quick Views for Adaptive Card Extensions which can be used in Microsoft Viva Connections and in SharePoint.",
7+
"url": "https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/BasicCard-HTML-QuickView",
8+
"longDescription": [
9+
"This is a baseline solution to demonstrate the HTML powered Quick Views for Adaptive Card Extensions which can be used in Microsoft Viva Connections and in SharePoint.",
10+
"To be able to use SCSS definitions with your solutions, @microsoft/sp-office-ui-fabric-core package has been included in the solution."
11+
],
12+
"creationDateTime": "2024-08-20",
13+
"updateDateTime": "2024-08-20",
14+
"products": [
15+
"SharePoint",
16+
"Viva"
17+
],
18+
"metadata": [
19+
{
20+
"key": "SPFX-VERSION",
21+
"value": "1.20"
22+
}
23+
],
24+
"thumbnails": [
25+
{
26+
"type": "image",
27+
"order": 100,
28+
"url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/BasicCard-HTML-QuickView/assets/preview.png",
29+
"alt": "Desktop Preview"
30+
},
31+
{
32+
"type": "image",
33+
"order": 200,
34+
"url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/BasicCard-HTML-QuickView/assets/mobile-preview.png",
35+
"alt": "Mobile Preview"
36+
}
37+
],
38+
"authors": [
39+
{
40+
"gitHubAccount": "VesaJuvonen",
41+
"pictureUrl": "https://github.com/vesajuvonen.png",
42+
"name": "Vesa Juvonen"
43+
}
44+
],
45+
"references": [
46+
{
47+
"name": "Viva Connections Extensibility guidance",
48+
"description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.",
49+
"url": "https://aka.ms/viva/connections/extensibility"
50+
},
51+
{
52+
"name": "Adaptive Card Documentation",
53+
"description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.",
54+
"url": "https://adaptivecards.io/"
55+
},
56+
{
57+
"name": "Adaptive Card Extension Design Guidance",
58+
"description": "Design guidance for laying out Adaptive Card Extensions.",
59+
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro"
60+
}
61+
]
62+
}
63+
]

‎samples/BasicCard-HTML-QuickView/config/config.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
3+
"version": "2.0",
4+
"bundles": {
5+
"html-quick-view-adaptive-card-extension": {
6+
"components": [
7+
{
8+
"entrypoint": "./lib/adaptiveCardExtensions/htmlQuickView/HtmlQuickViewAdaptiveCardExtension.js",
9+
"manifest": "./src/adaptiveCardExtensions/htmlQuickView/HtmlQuickViewAdaptiveCardExtension.manifest.json"
10+
}
11+
]
12+
}
13+
},
14+
"externals": {},
15+
"localizedResources": {
16+
"HtmlQuickViewAdaptiveCardExtensionStrings": "lib/adaptiveCardExtensions/htmlQuickView/loc/{locale}.js"
17+
}
18+
}

‎samples/BasicCard-HTML-QuickView/config/deploy-azure-storage.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
3+
"workingDir": "./release/assets/",
4+
"account": "<!-- STORAGE ACCOUNT NAME -->",
5+
"container": "html-quick-view",
6+
"accessKey": "<!-- ACCESS KEY -->"
7+
}

‎samples/BasicCard-HTML-QuickView/config/package-solution.json

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
3+
"solution": {
4+
"name": "html-quick-view-client-side-solution",
5+
"id": "d2a2e20d-5fa9-466b-9e6b-fb95a9d0d07f",
6+
"version": "1.0.0.0",
7+
"includeClientSideAssets": true,
8+
"skipFeatureDeployment": true,
9+
"isDomainIsolated": false,
10+
"developer": {
11+
"name": "",
12+
"websiteUrl": "",
13+
"privacyUrl": "",
14+
"termsOfUseUrl": "",
15+
"mpnId": "Undefined-1.20.0-dev.104"
16+
},
17+
"metadata": {
18+
"shortDescription": {
19+
"default": "HTMLQuickView description"
20+
},
21+
"longDescription": {
22+
"default": "HTMLQuickView description"
23+
},
24+
"screenshotPaths": [],
25+
"videoUrl": "",
26+
"categories": []
27+
},
28+
"features": [
29+
{
30+
"title": "html-quick-view Feature",
31+
"description": "The feature that activates elements of the html-quick-view solution.",
32+
"id": "fdef704e-6ef6-4cef-bcae-3954cdb5497d",
33+
"version": "1.0.0.0"
34+
}
35+
]
36+
},
37+
"paths": {
38+
"zippedPackage": "solution/html-quick-view.sppkg"
39+
}
40+
}

‎samples/BasicCard-HTML-QuickView/config/sass.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
3+
}

‎samples/BasicCard-HTML-QuickView/config/serve.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
3+
"port": 4321,
4+
"https": true,
5+
"initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
6+
}

‎samples/BasicCard-HTML-QuickView/config/write-manifests.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
3+
"cdnBasePath": "<!-- PATH TO CDN -->"
4+
}

‎samples/BasicCard-HTML-QuickView/gulpfile.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
'use strict';
2+
3+
const build = require('@microsoft/sp-build-web');
4+
5+
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
6+
7+
var getTasks = build.rig.getTasks;
8+
build.rig.getTasks = function () {
9+
var result = getTasks.call(build.rig);
10+
11+
result.set('serve', result.get('serve-deprecated'));
12+
13+
return result;
14+
};
15+
16+
build.initialize(require('gulp'));

0 commit comments

Comments
 (0)