[](../../../assets/webparts/data_visualizer/layouts/manage_cards_fields.png)
As a field value, you can choose either a field property value (from the list or as free text) and without any transformation or use an Handlebars expression by clicking on the checkbox next to it. In this case, all helpers from the main template are available. Also, if the field doesn't have the **'Allow HTML'** indication flag enabled, it means the value will be always interpreted as text, regardless if you set an HTML value. Otherwise, your value will be interpreted as HTML for those fields (ex: '_Location_' and '_Tags_' placeholder fields). For HTML fields you can use the special variable `@root.theme` to use theme colors (ex: `@root.theme.palette.themePrimary`) or `@root.slots.[](../../../assets/webparts/data_visualizer/layouts/card_allow_html.png)
. 8 | | **Enable result preview** | If enabled, display a callout with an interactive preview of the document based on the value specified value for the `PreviewUrl` current data source [slot](../slots.md).[](../../../assets/webparts/data_visualizer/layouts/card_preview.png)
| False 9 | | **Show file icon** | Hide or display the file icon for the result card. The file icon is determined using the `FileType` [slot](../slots.md). | True 10 | | **Compact mode** | Display cards as compact. | False 11 | | **Preferred number of cards per row** | Specifiy the **preferred** number of cards to display per row **when the required width space is available**. The Web Part will always adjust the number of possible tiles to display depending the available width. It means that if you set this value to '3' but you display the Web Part in small column, only 1 tile will be displayed. | 3. 12 | -------------------------------------------------------------------------------- /docs/usage/data-visualizer/layouts/custom.md: -------------------------------------------------------------------------------- 1 | The 'custom' layout is the minimal layout to start with if you want to create your own customized UI from scratch. You can also start from an existing layout. 2 | 3 | {: .center} 4 | 5 | > Updating a builtin layout (ex: 'Cards', 'Detail List', etc.) will automatically switch the selected layout to 'Custom' with your modifications as content. **All previous custom layout content will be overwritten**. 6 | 7 | {: .center} 8 | 9 | You have also the ability to use an external _.html_ file to centralize your customizations. This file must be stored in an accessible location for uses (ex: a SharePoint document library with _'Read'_ permissions for concerned users). 10 | 11 | {: .center} 12 | 13 | > Unless you specify an external file, the template content is stored in the Web Part property bag. 14 | 15 | Updating the layout HTML template is a good option for minor UI updates (Ex: add a link, update colors, etc.). For more control over the UI, you may want to use the extensibility library feature. 16 | -------------------------------------------------------------------------------- /docs/usage/data-visualizer/layouts/debug.md: -------------------------------------------------------------------------------- 1 | 2 | The 'debug' layout allows you to see all relevant data used by layout templates or data sources during render. 3 | 4 | {: .center} 5 | 6 | The template context object exposes the following properties: 7 | 8 | ```json 9 | "paging": { 10 | "currentPageNumber": "[](../../../assets/webparts/data_visualizer/layouts/details_list_fields.png)
| Disabled 50 | | **Hide this web part if there's nothing to show** | If there is no results, the Web Part will remain blank in display mode (title and 'See all' link included). In edit mode, you will see a message indicating there is no results.
| Disabled 51 | | **Show results count** | Hide or display the results count for the current query. | Enabled 52 | | **Use Microsoft Graph Toolkit** | Enable or disable the Microsoft Graph Toolkit to be used in Handlebars template. Refer to the [MGT documentation](https://docs.microsoft.com/en-us/graph/toolkit/overview) to see available components. 53 | 54 | ### Result types 55 | 56 | The result types feature gives you the ability to apply a conditional rendering at item level according to data source field values. 57 | 58 | {: .center} 59 | 60 | > Not all layouts support the result types feature (ex: Details lsit and slider layouts). 61 | 62 | **Example** 63 | 64 | Given the following conditions, we apply a border with a specific color for each: 65 | 66 | {: .center} 67 | 68 | {: .center} 69 | 70 | The result would be like this: 71 | 72 | {: .center} 73 | 74 | The following operators are supported: 75 | 76 | - Equals 77 | - Not equals 78 | - Contains 79 | - StartsWith 80 | - Greater Or Equal 81 | - Less Or Equal 82 | - Less than 83 | - Greater than 84 | - Is not null 85 | 86 | In the case you use a custom template, you can still benefit from this feature following this markup: 87 | 88 | ```html 89 | {{#> resultTypes}} 90 | {{!-- The block below will be used as default item template if no result types matched --}} 91 |[](../../../assets/webparts/data_visualizer/layouts/manage_people_fields.png)
As a field value, you can choose either a field property value (from the list or as free text) and without any transformation or use an Handlebars expression by clicking on the checkbox next to it. In this case, all helpers from the main template are available. Also, if the field doesn't have the **'Allow HTML'** indication flag enabled, it means the value will be always interpreted as text, regardless if you set an HTML value. Otherwise, your value will be interpreted as HTML for those fields (ex: '_Primary text_' placeholder field). For HTML fields you can use the special variable `@root.theme` to use theme colors (ex: `@root.theme.palette.themePrimary`) or `@root.slots.[](../../../assets/webparts/data_visualizer/layouts/persona_card_hover.png)
This feature uses Microsoft Graph and [Microsoft Graph Toolkit](https://docs.microsoft.com/en-us/graph/toolkit/components/person) to display information about the user and needs the following API permissions in your tenant to work:[](../../../assets/webparts/data_visualizer/layouts/simple_list_thumbnail.png)
| False -------------------------------------------------------------------------------- /docs/usage/data-visualizer/layouts/slider.md: -------------------------------------------------------------------------------- 1 | The 'slider' layout allows you to display data as as dynamic slider (i.e caroussel). 2 | 3 | {: .center} 4 | 5 | | Setting | Description | Default value 6 | | ------- |---------------- | ---------- 7 | | **Auto play** | If enabled, slides move automatically every X seconds. | True 8 | | **Auto play duration** | Move elements every X seconds. | 3 seconds. 9 | | **Pause on hover** | If enabled, pause the slider on mouse hover. | True 10 | | **Number of elements to group together in slides** | Groups cells together in slides. | 3. 11 | | **Show page dots** | Enable or disable slider navigation. You can adjust the dots position by updating the `.flickity-page-dots` CSS class. | True 12 | | **Infinite scrolling** | Enable or disable infinite scrolling on the carousel. | False 13 | | **Slide height (in px)** | Dynamically set the slides height to adjust your results. | 360px. 14 | | **Slide width (in px)** | Dynamically set the slides width to adjust your results. | 318px. -------------------------------------------------------------------------------- /docs/usage/data-visualizer/layouts/teams.md: -------------------------------------------------------------------------------- 1 | The **Teams** layout can be used to display information about Microsoft Teams teams and Microsoft 365 groups: 2 | 3 | {: .center} 4 | 5 | | Setting | Description | Default value 6 | | ------- |---------------- | ---------- | 7 | | Data source fields | The data source to display as tags. The order you select fields will determine the display order.[](../../assets/webparts/search_box/suggestions_providers_panel.png)
To add values for this provider, refer to the following [documentation](https://docs.microsoft.com/en-us/sharepoint/search/manage-query-suggestions) (caution: it can take up to 24h for changes to take effect). Multiple providers can be enabled at once. 32 | |**Number of suggestions to show per group**| The number of suggestions to show per group. | 10 33 | 34 | ### Connections 35 | 36 | {: .center} 37 | 38 | Optionally, you can set a default query text coming from an other dynamic data source on the page. For instance, connect the search box to a page environment variable like a query string parameter. The value retrieved from a connected data source will be displayed automatically at page load in the text box if present and broadcasted to any other Web Parts connected to the search box Web Part (ex: a 'Data Visualizer' Web Part) resulting to a cascading effect. -------------------------------------------------------------------------------- /extensibility-library-demo/.gitignore: -------------------------------------------------------------------------------- 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 | sharepoint 15 | temp 16 | *.sppkg 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 35 | -------------------------------------------------------------------------------- /extensibility-library-demo/.nvmrc: -------------------------------------------------------------------------------- 1 | 14.17.0 -------------------------------------------------------------------------------- /extensibility-library-demo/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "msjsdiag.debugger-for-chrome" 4 | ] 5 | } -------------------------------------------------------------------------------- /extensibility-library-demo/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | /** 3 | * Install Chrome Debugger Extension for Visual Studio Code to debug your components with the 4 | * Chrome browser: https://aka.ms/spfx-debugger-extensions 5 | */ 6 | "version": "0.2.0", 7 | "configurations": [{ 8 | "name": "Local workbench", 9 | "type": "chrome", 10 | "request": "launch", 11 | "url": "https://localhost:4321/temp/workbench.html", 12 | "webRoot": "${workspaceRoot}", 13 | "sourceMaps": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///.././src/*": "${webRoot}/src/*", 16 | "webpack:///../../../src/*": "${webRoot}/src/*", 17 | "webpack:///../../../../src/*": "${webRoot}/src/*", 18 | "webpack:///../../../../../src/*": "${webRoot}/src/*" 19 | }, 20 | "runtimeArgs": [ 21 | "--remote-debugging-port=9222" 22 | ] 23 | }, 24 | { 25 | "name": "Hosted workbench", 26 | "type": "chrome", 27 | "request": "launch", 28 | "url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx", 29 | "webRoot": "${workspaceRoot}", 30 | "sourceMaps": true, 31 | "sourceMapPathOverrides": { 32 | "webpack:///.././src/*": "${webRoot}/src/*", 33 | "webpack:///../../../src/*": "${webRoot}/src/*", 34 | "webpack:///../../../../src/*": "${webRoot}/src/*", 35 | "webpack:///../../../../../src/*": "${webRoot}/src/*" 36 | }, 37 | "runtimeArgs": [ 38 | "--remote-debugging-port=9222", 39 | "-incognito" 40 | ] 41 | } 42 | ] 43 | } -------------------------------------------------------------------------------- /extensibility-library-demo/.vscode/settings.json: -------------------------------------------------------------------------------- 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 | "**/lib-amd": true, 10 | "src/**/*.scss.ts": true 11 | }, 12 | "typescript.tsdk": ".\\node_modules\\typescript\\lib" 13 | } -------------------------------------------------------------------------------- /extensibility-library-demo/.yo-rc.json: -------------------------------------------------------------------------------- 1 | { 2 | "@microsoft/generator-sharepoint": { 3 | "packageManager": "pnpm", 4 | "isCreatingSolution": true, 5 | "environment": "spo", 6 | "version": "1.12.1", 7 | "libraryName": "aequos-extensibility-demo", 8 | "libraryId": "4896309f-54bc-48f2-a7ee-0785e019d195", 9 | "isDomainIsolated": false, 10 | "componentType": "library" 11 | } 12 | } -------------------------------------------------------------------------------- /extensibility-library-demo/README.md: -------------------------------------------------------------------------------- 1 | ## aequos - Extensibility Library Demo Project 2 | 3 | This project shows how to implement custom data sources for the 'Modern Data Visualizer' Web Part. 4 | 5 | ### Documentation 6 | 7 | A complete step-by-step tutorial is available [here](https://aequos-solutions.github.io/modern-data-visualizer/extensibility/#create-an-extensibility-library). -------------------------------------------------------------------------------- /extensibility-library-demo/config/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json", 3 | "version": "2.0", 4 | "bundles": { 5 | "my-company-library-library": { 6 | "components": [ 7 | { 8 | "entrypoint": "./lib/libraries/myCompanyLibrary/MyCompanyLibraryLibrary.js", 9 | "manifest": "./src/libraries/myCompanyLibrary/MyCompanyLibraryLibrary.manifest.json" 10 | } 11 | ] 12 | } 13 | }, 14 | "externals": {}, 15 | "localizedResources": { 16 | "MyCompanyLibraryLibraryStrings": "lib/libraries/myCompanyLibrary/loc/{locale}.js" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /extensibility-library-demo/config/copy-assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json", 3 | "deployCdnPath": "./release/assets/" 4 | } 5 | -------------------------------------------------------------------------------- /extensibility-library-demo/config/deploy-azure-storage.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json", 3 | "workingDir": "./release/assets/", 4 | "account": "", 5 | "container": "aequos-extensibility-starter", 6 | "accessKey": "" 7 | } -------------------------------------------------------------------------------- /extensibility-library-demo/config/package-solution.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json", 3 | "solution": { 4 | "name": "aequos - Extensibility Library Demo", 5 | "id": "4896309f-54bc-48f2-a7ee-0785e019d195", 6 | "version": "1.3.0.0", 7 | "includeClientSideAssets": true, 8 | "skipFeatureDeployment": true, 9 | "isDomainIsolated": false, 10 | "developer": { 11 | "mpnId": "", 12 | "name": "Franck Cornu", 13 | "privacyUrl": "www.aequos.ca/privacy", 14 | "termsOfUseUrl": "www.aequos.ca/eula", 15 | "websiteUrl": "www.aequos.ca" 16 | } 17 | }, 18 | "paths": { 19 | "zippedPackage": "solution/aequos-extensibility-demo.sppkg" 20 | } 21 | } -------------------------------------------------------------------------------- /extensibility-library-demo/config/serve.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json", 3 | "port": 4321, 4 | "https": true 5 | } 6 | -------------------------------------------------------------------------------- /extensibility-library-demo/config/write-manifests.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json", 3 | "cdnBasePath": "" 4 | } -------------------------------------------------------------------------------- /extensibility-library-demo/gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const gulp = require('gulp'); 4 | const log = require('fancy-log'); 5 | const fs = require('fs'); 6 | 7 | const readJson = (path, cb) => { 8 | fs.readFile(require.resolve(path), (err, data) => { 9 | if (err) 10 | log.error(err) 11 | else 12 | cb(null, JSON.parse(data)) 13 | }); 14 | } 15 | 16 | const build = require('@microsoft/sp-build-web'); 17 | build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`); 18 | 19 | var getTasks = build.rig.getTasks; 20 | build.rig.getTasks = function () { 21 | var result = getTasks.call(build.rig); 22 | 23 | result.set('serve', result.get('serve-deprecated')); 24 | 25 | return result; 26 | }; 27 | 28 | build.initialize(gulp); 29 | 30 | gulp.task('update-version', async () => { 31 | 32 | const webpartManifests = [ 33 | './src/libraries/myCompanyLibrary/MyCompanyLibraryLibrary.manifest.json' 34 | ]; 35 | 36 | const semver = require('semver') 37 | const versionArgIdx = process.argv.indexOf('--value'); 38 | const newVersionNumber = semver.valid(process.argv[versionArgIdx+1]); 39 | 40 | if (versionArgIdx !== -1 && newVersionNumber) { 41 | 42 | // Update version in the package-solution 43 | const pkgSolutionFilePath = './config/package-solution.json'; 44 | 45 | readJson(pkgSolutionFilePath, (err, pkgSolution) => { 46 | log.info('Old package-solution.json version:\t' + pkgSolution.solution.version); 47 | const pkgVersion = `${semver.major(newVersionNumber)}.${semver.minor(newVersionNumber)}.${semver.patch(newVersionNumber)}.0`; 48 | pkgSolution.solution.version = pkgVersion 49 | log.info('New package-solution.json version:\t' + pkgVersion); 50 | fs.writeFile(pkgSolutionFilePath, JSON.stringify(pkgSolution, null, 4), (error) => {}); 51 | }); 52 | 53 | // Updated version in Web Part manifests 54 | webpartManifests.forEach((manifestFile) => { 55 | readJson(manifestFile, (err, manifest) => { 56 | 57 | log.info('Old manifestFile version:\t' + manifest.version); 58 | const wpVersion = `${semver.major(newVersionNumber)}.${semver.minor(newVersionNumber)}.${semver.patch(newVersionNumber)}`; 59 | manifest.version = wpVersion; 60 | log.info('New manifestFile version:\t' + wpVersion); 61 | fs.writeFile(manifestFile, JSON.stringify(manifest, null, 4), (error) => {}); 62 | }); 63 | }); 64 | } else { 65 | log.error(`The provided version ${process.argv[versionArgIdx+1]} is not a valid SemVer version`); 66 | } 67 | }); -------------------------------------------------------------------------------- /extensibility-library-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aequos-extensibility-demo", 3 | "version": "1.0.0", 4 | "private": false, 5 | "main": "lib/index.js", 6 | "scripts": { 7 | "build": "gulp bundle --ship && gulp package-solution --ship", 8 | "clean": "gulp clean", 9 | "test": "gulp test" 10 | }, 11 | "dependencies": { 12 | "@aequos/extensibility": "1.3.0", 13 | "@microsoft/sp-component-base": "1.12.1", 14 | "@microsoft/sp-core-library": "1.12.1", 15 | "@microsoft/sp-http": "1.12.1", 16 | "@microsoft/sp-lodash-subset": "1.12.1", 17 | "@microsoft/sp-property-pane": "1.12.1", 18 | "@microsoft/sp-webpart-base": "1.12.1", 19 | "@types/es6-promise": "0.0.33", 20 | "@types/webpack-env": "1.13.1", 21 | "@webcomponents/custom-elements": "1.4.0", 22 | "@webcomponents/webcomponentsjs": "2.4.2", 23 | "handlebars": "4.7.6", 24 | "office-ui-fabric-react": "7.156.0", 25 | "react": "16.9.0", 26 | "react-dom": "16.9.0", 27 | "tslib": "^1.11.0", 28 | "typescript": "~3.3.0" 29 | }, 30 | "devDependencies": { 31 | "@microsoft/rush-stack-compiler-3.7": "0.2.8", 32 | "@microsoft/sp-build-web": "1.12.1", 33 | "@microsoft/sp-module-interfaces": "1.12.1", 34 | "@microsoft/sp-tslint-rules": "1.12.1", 35 | "@microsoft/sp-webpart-workbench": "1.12.1", 36 | "@types/react": "16.9.36", 37 | "@types/react-dom": "16.9.8", 38 | "@webcomponents/custom-elements": "^1.2.4", 39 | "@webcomponents/webcomponentsjs": "^2.2.10", 40 | "ajv": "~5.2.2", 41 | "fancy-log": "1.3.3", 42 | "gulp": "4.0.2", 43 | "semver": "6.3.0", 44 | "tslib": "^1.11.0" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /extensibility-library-demo/src/index.ts: -------------------------------------------------------------------------------- 1 | export { MyCompanyLibraryLibrary } from './libraries/myCompanyLibrary/MyCompanyLibraryLibrary'; 2 | -------------------------------------------------------------------------------- /extensibility-library-demo/src/libraries/CustomComponent.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { BaseWebComponent } from '@aequos/extensibility'; 3 | import * as ReactDOM from 'react-dom'; 4 | 5 | export interface IObjectParam { 6 | myProperty: string; 7 | } 8 | 9 | export interface ICustomComponentProps { 10 | 11 | /** 12 | * A sample string param 13 | */ 14 | myStringParam?: string; 15 | 16 | /** 17 | * A sample object param 18 | */ 19 | myObjectParam?: IObjectParam; 20 | 21 | /** 22 | * A sample date param 23 | */ 24 | myDateParam?: Date; 25 | 26 | /** 27 | * A sample number param 28 | */ 29 | myNumberParam?: number; 30 | 31 | /** 32 | * A sample boolean param 33 | */ 34 | myBooleanParam?: boolean; 35 | } 36 | 37 | export interface ICustomComponenState { 38 | } 39 | 40 | export class CustomComponent extends React.Component