honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

styling, README

This commit is contained in:
Alex Terentiev 2016-11-12 15:26:50 -08:00
parent 8896b08ecb
commit 34269fdb8b
4 changed files with 113 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
samples/knockout-taxonomy/README.md
View File

@ -1,26 +1,51 @@
## knockout-metadata
# title of the sample
This is where you include your web part docs.
## Summary
Sample Web Part illustrating
* Reading taxonomy term stores' hierarchy from SharePoint
* Loading JavaScript Object Model scripts
* creating Knockout components
### Building the code
![Taxonomy Sample Web Part](./assets/Taxonomy.png)
```bash
git clone the repo
npm i
npm i -g gulp
gulp
```
## Applies to
This package produces the following:
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
* lib/* commonjs components - this allows this package to be reused from other packages.
* dist/* - a single bundle containing the components used for uploading to a cdn pointing a registered Sharepoint webpart library to.
* example/* a test page that hosts all components in this package.
## Solution
### Build options
Solution|Author(s)
--------|---------
knockout-metadata | Alex Terentiev ([Sharepointalist Inc.](http://www.sharepointalist.com), [AJIXuMuM](https://github.com/AJIXuMuK))
gulp nuke - TODO
gulp test - TODO
gulp watch - TODO
gulp build - TODO
gulp deploy - TODO
## Version history
Version|Date|Comments
-------|----|--------
1.0|November 12, 2016|Initial release
## Disclaimer
**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.**
---
## Minimal Path to Awesome
- Clone this repository
- in the command line run:
- `npm i`
- `gulp serve`
> Include any additional steps as needed.
## Features
This project contains Client-Side Web Part built on the SharePoint Framework illustrating how to request Taxonomy Term Stores' hierarchy from SharePoint.
This Web Part illustrates the following concepts on top of the SharePoint Framework:
- Reading taxonomy term stores' hierarchy from SharePoint
- Loading JavaScript Object Model scripts (init.js, sp.runtime.js, sp.js, taxonomy.js)
- creating custom Knockout components
- styling HTML elements to match Fabric UI experience
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/ko-dependent-properties" />

BIN
samples/knockout-taxonomy/assets/Taxonomy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 MiB

33
samples/knockout-taxonomy/src/webparts/termSetRequester/TermSetRequester.module.scss
View File

@ -18,4 +18,37 @@
.button {
text-decoration: none;
}
.termStoreList {
list-style-image: url('/_layouts/15/Images/EMMRoot.png');
}
.termGroupList {
list-style-image: url('/_layouts/15/Images/EMMGroup.png');
}
.termSetList {
list-style-image: url('/_layouts/15/Images/EMMTermSet.png');
}
.termList {
list-style-image: url('/_layouts/15/Images/EMMTerm.png');
}
.info {
position: relative;
line-height: 30px;
.groupHeaderExpand {
right: 0px;
height: 24px;
padding: 0px;
top: 5px;
position: absolute;
}
}
.taxonomy {
overflow: auto;
max-height: 600px;
}
}

46
samples/knockout-taxonomy/src/webparts/termSetRequester/controls/TaxonomyControlView.ts
View File

@ -1,15 +1,23 @@
import styles from '../TermSetRequester.module.scss';
export class TaxonomyControlView {
private _template: string = `
<div>
<ul>
<div class="${styles.taxonomy}">
<ul class="${styles.termStoreList}">
<!-- ko template: { name: 'termStoreTpl', foreach: termStores } -->
<!-- /ko -->
</ul>
</div>
<script id="termStoreTpl" type="text/html">
<li><b>Type: Term Store</b> Name: <span data-bind="text: name"></span>; ID: <span data-bind="text: id"></span>&nbsp;<a href="javascript:;" data-bind="text: (isExpanded() ? 'Collapse' : 'Expand'), click: actionClick"></a>
<ul data-bind="visible: isExpanded">
<li>
<div class="${styles.info}">
<b data-bind="text: name"></b>&nbsp;&nbsp;&nbsp;ID: <span data-bind="text: id"></span>
<button class="ms-GroupHeader-expand ${styles.groupHeaderExpand}">
<i class="ms-Icon ms-Icon--ChevronDown" data-bind="click: actionClick, css: { 'is-collapsed': !isExpanded() }"></i>
</button>
</div>
<ul data-bind="visible: isExpanded" class="${styles.termGroupList}">
<!-- ko template: { name: 'termGroupTpl', foreach: termGroups } -->
<!-- /ko -->
</ul>
@ -17,8 +25,14 @@ export class TaxonomyControlView {
</script>
<script id="termGroupTpl" type="text/html">
<li><b>Type: Term Group</b> Name: <span data-bind="text: name"></span>; Description: <span data-bind="text: description"></span>&nbsp;<a href="javascript:;" data-bind="text: (isExpanded() ? 'Collapse' : 'Expand'), click: actionClick"></a>
<ul data-bind="visible: isExpanded">
<li>
<div class="${styles.info}">
<b data-bind="text: name"></b>&nbsp;&nbsp;&nbsp;ID: <span data-bind="text: id"></span>
<button class="ms-GroupHeader-expand ${styles.groupHeaderExpand}">
<i class="ms-Icon ms-Icon--ChevronDown" data-bind="click: actionClick, css: { 'is-collapsed': !isExpanded() }"></i>
</button>
</div>
<ul data-bind="visible: isExpanded" class="${styles.termSetList}">
<!-- ko template: { name: 'termSetTpl', foreach: termSets } -->
<!-- /ko -->
</ul>
@ -26,8 +40,14 @@ export class TaxonomyControlView {
</script>
<script id="termSetTpl" type="text/html">
<li><b>Type: Term Set</b> Name: <span data-bind="text: name"></span>; Description: <span data-bind="text: description"></span>&nbsp;<a href="javascript:;" data-bind="text: (isExpanded() ? 'Collapse' : 'Expand'), click: actionClick"></a>
<ul data-bind="visible: isExpanded">
<li>
<div class="${styles.info}">
<b data-bind="text: name"></b>&nbsp;&nbsp;&nbsp;ID: <span data-bind="text: id"></span>
<button class="ms-GroupHeader-expand ${styles.groupHeaderExpand}">
<i class="ms-Icon ms-Icon--ChevronDown" data-bind="click: actionClick, css: { 'is-collapsed': !isExpanded() }"></i>
</button>
</div>
<ul data-bind="visible: isExpanded" class="${styles.termList}">
<!-- ko template: { name: 'termTpl', foreach: terms } -->
<!-- /ko -->
</ul>
@ -35,12 +55,18 @@ export class TaxonomyControlView {
</script>
<script id="termTpl" type="text/html">
<li><b>Type: Term</b> Name: <span data-bind="text: name"></span>; ID: <span data-bind="text: id"></span>; Description: <span data-bind="text: description"></span>&nbsp;<a href="javascript:;" data-bind="visible: hasChildTerms, text: (isExpanded() ? 'Collapse' : 'Expand'), click: actionClick"></a>
<li>
<div class="${styles.info}">
<b data-bind="text: name"></b>&nbsp;&nbsp;&nbsp;ID: <span data-bind="text: id"></span>
<button class="ms-GroupHeader-expand ${styles.groupHeaderExpand}">
<i class="ms-Icon ms-Icon--ChevronDown" data-bind="visible: hasChildTerms, click: actionClick, css: { 'is-collapsed': !isExpanded() }"></i>
</button>
</div>
Labels:<br/>
<div data-bind="foreach: labels">
<div>Value: <span data-bind="text: value"></span>; Language: <span data-bind="text: language"></span>; Is Default: <span data-bind="text: isDefaultForLanguage"></span></div>
</div>
<ul data-bind="visible: isExpanded">
<ul data-bind="visible: isExpanded" class="${styles.termList}">
<!-- ko template: { name: 'termTpl', foreach: terms } -->
<!-- /ko -->
</ul>