SharePoint JSON Formatter

52 | 53 | 54 | {this.props.modalHeader} 55 | 56 | 57 |

58 | 59 | this.toggle('1') }> 60 | Help 61 | 62 | 63 | 64 | this.toggle('2') }> 65 | Variables 66 | 67 | 68 | 69 | this.toggle('3') }> 70 | Functions 71 | 72 | 73 | 74 | this.toggle('4') }> 75 | Math 76 | 77 | 78 |

79 | 80 | 81 |

82 | 83 | 84 |

85 |
86 | @currentField - refers to text in current field.
87 | @currentField.title - Person fields are represented in the system as objects, and a person’s display name is contained within that object’s title property
88 | @currentField.lookupValue - Lookup fields are also represented as objects; the display text is stored in the lookupValue property
89 | @now - current date/time
90 | @me - current user's email
91 | [$FieldName] - refers to value in field on same row
92 | [$PeoplePicker.email] - refers to email of the person in a people picker field
93 |
94 | People picker field properties: id, title, email, sip, picture 95 | 96 |
97 |

98 | 99 | 100 |

113 | 114 | 115 |

116 |
117 | ** - multiply
118 | // - divide
119 | ++ - add / concatenate strings
120 | -- - subtract
121 |
122 | () - parentheses are also supported to specify order of operations
123 | 124 |

125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 |

138 | ) 139 | } 140 | } 141 | 142 | export default MyModal; 143 | 144 | 145 | -------------------------------------------------------------------------------- /src/Components/Property.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | Row, 4 | Col, 5 | Label, 6 | Input, 7 | InputGroup, 8 | InputGroupButtonDropdown, 9 | InputGroupAddon, 10 | InputGroupText, 11 | DropdownMenu, 12 | DropdownToggle, 13 | DropdownItem, 14 | Container, 15 | Button 16 | } from 'reactstrap'; 17 | import Condition from './Condition.jsx'; 18 | 19 | 20 | 21 | class Property extends Component { 22 | constructor(props) { 23 | super(props); 24 | this.setValue = this.setValue.bind(this); 25 | this.handleInputChange = this.handleInputChange.bind(this); 26 | this.togglekeyDropdownOpen = this.togglekeyDropdownOpen.bind(this); 27 | this.toggleValueDropdownOpen = this.toggleValueDropdownOpen.bind(this); 28 | this.toggleConditionals = this.toggleConditionals.bind(this); 29 | this.moveRule = this.moveRule.bind(this); 30 | this.state = { 31 | key: this.props.properties[this.props.index].name, 32 | value: this.props.properties[this.props.index].value, 33 | conditionalFlag: (typeof this.props.properties[this.props.index].value === 'object' && this.props.properties[this.props.index].value.length ? true : false), // True if rules have been defined, otherwise false 34 | keyDropdownOpen: false, 35 | valueDropdownOpen: false, 36 | prevIndex: this.props.index, 37 | reset: false 38 | }; 39 | } 40 | 41 | componentDidUpdate() { 42 | if (this.state.prevIndex !== this.props.index) { 43 | this.setState({ 44 | key: this.props.properties[this.props.index].name, 45 | value: this.props.properties[this.props.index].value, 46 | conditionalFlag: (typeof this.props.properties[this.props.index].value === 'object' && this.props.properties[this.props.index].value.length ? true : false), // True if rules have been defined, otherwise false 47 | keyDropdownOpen: false, 48 | valueDropdownOpen: false, 49 | prevIndex: this.props.index 50 | }, () => { this.props.buildJSON() }); 51 | } 52 | } 53 | 54 | 55 | 56 | setValue(obj) { 57 | this.setState({ 58 | value: obj 59 | }) 60 | } 61 | 62 | // called inside Condition component 63 | moveRule(ele, index) { 64 | let arr = this.state.value.slice(); 65 | let temp = arr[index]; 66 | 67 | console.log(arr); 68 | switch(ele.target.attributes.value.value) { 69 | case 'up': 70 | arr.splice(index, 1); 71 | arr.splice((index === 0 ? 0 : index-1), 0, temp); 72 | break; 73 | case 'down': 74 | arr.splice(index, 1); 75 | arr.splice(index+1, 0, temp); 76 | break; 77 | } 78 | 79 | 80 | this.setState({ 81 | value: arr 82 | }, () => { this.props.updateProperty(this.props.index, this.state.key, this.state.value); }); 83 | } 84 | 85 | 86 | 87 | toggleConditionals() { 88 | this.setState({ 89 | conditionalFlag: !this.state.conditionalFlag, 90 | value: [] 91 | }, () => { this.props.updateProperty( this.props.index, this.state.key, this.state.value) }); 92 | } 93 | 94 | handleInputChange(event) { 95 | const target = event.target; 96 | const name = target.name; 97 | 98 | let resetValue = ''; 99 | 100 | if (name === 'key') { 101 | let value = target.type === 'button' ? target.innerHTML : target.value; 102 | resetValue = []; 103 | this.setState({ 104 | [name]: value, 105 | value: resetValue 106 | }, () => { this.props.updateProperty( this.props.index, value, '') }) 107 | 108 | } else { 109 | let value = target.type === 'button' ? ( this.state.key === 'background-color' ? this.props.colors[target.innerHTML] : target.innerHTML) : target.value; 110 | resetValue = value; 111 | this.setState({ 112 | [name]: value, 113 | value: resetValue 114 | }, () => { this.props.updateProperty( this.props.index, this.state.key, this.state.value) }) 115 | } 116 | 117 | 118 | console.log(this.props.properties[this.props.index].value); 119 | 120 | } 121 | 122 | setConditionalValue(eleValue) { 123 | this.setState({ 124 | value: eleValue 125 | }); 126 | } 127 | 128 | togglekeyDropdownOpen() { 129 | this.setState({ 130 | value: '', 131 | keyDropdownOpen: !this.state.keyDropdownOpen 132 | }); 133 | } 134 | 135 | toggleValueDropdownOpen() { 136 | this.setState({ 137 | valueDropdownOpen: !this.state.valueDropdownOpen 138 | }); 139 | } 140 | 141 | render() { 142 | return ( 143 | 144 | 145 | 146 | 147 |

148 | this.props.deleteKey('properties', this.props.index)}>X 149 |

150 | 151 | 152 | Property (help) 153 | 154 | 155 | 156 | 157 | 158 | {Object.keys(this.props.nameChoices).map((key, i) => { 159 | return ({key}); 160 | })} 161 | 162 | 163 | 164 | 165 | 166 | 167 | {!this.state.conditionalFlag ? 168 |

169 | Value (help) 170 | 171 | 172 | 174 | 175 | 176 | { (this.props.nameChoices[this.state.key] !== undefined && this.props.nameChoices[this.state.key].options !== undefined 177 | ? this.props.nameChoices[this.state.key].options.split(',').map((key, i) => { 178 | return ({key}); 179 | }) : (this.state.key === 'background-color' ? Object.keys(this.props.colors).map((key, i) => { 180 | return ({key}); 181 | }) 182 | : '') )} 183 | 184 | 185 | 186 |

187 | : ''} 188 | 189 | 190 | 191 |

192 | 193 |

194 | 195 | 196 | {this.state.conditionalFlag ? : ''} 197 | 198 | 199 | ) 200 | } 201 | } 202 | 203 | export default Property; -------------------------------------------------------------------------------- /src/Components/Rule.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Rule extends Component { 4 | 5 | render() { 6 | return ( 7 |

{this.props.selectRule(this.props.index)}} 8 | style={ { [this.props.name] : this.props.value, 'borderWidth': (this.props.index === this.props.selectedRule ? '3px' : '0px') }}> 9 | {this.props.text} 10 |

11 | ); 12 | } 13 | } 14 | 15 | 16 | export default Rule; -------------------------------------------------------------------------------- /src/Components/TopNavigation.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | Navbar, 4 | NavbarBrand, 5 | Nav, 6 | Collapse, 7 | NavbarToggler, 8 | NavItem, 9 | NavLink, 10 | DropdownToggle, 11 | DropdownMenu, 12 | DropdownItem, 13 | UncontrolledDropdown 14 | } from 'reactstrap'; 15 | import '../App.css'; 16 | 17 | class TopNavigation extends Component { 18 | constructor(props) { 19 | super(props); 20 | this.toggleNavbar = this.toggleNavbar.bind(this); 21 | this.state = { 22 | isOpen: false 23 | }; 24 | } 25 | 26 | toggleNavbar() { 27 | this.setState({ 28 | isOpen: !this.state.isOpen 29 | }); 30 | } 31 | 32 | render() { 33 | return ( 34 |

35 | 36 | {/* Left Nav Buttons */} 37 |

38 | 39 | 40 | Quick Add 41 | 42 | 43 | 44 | Attributes 45 | 46 | 47 | Hyperlink 48 | 49 | 50 | 51 | CSS Properties 52 | 53 | 54 | Background Color 55 | 56 | 57 | Bold Font 58 | 59 | 60 | Font Size 61 | 62 | 63 | Text Overflow 64 | 65 | 66 | 67 | Custom Row Actions 68 | 69 | 70 | Microsoft Flow 71 | 72 | 73 | 74 | 75 | 76 | Templates 77 | 78 | 79 | 80 | Completed/In Progress/Late 81 | 82 | 83 | Data Bars 0-1 84 | 85 | 86 | Data Bars 0-100 87 | 88 | 89 | Button with link + icon 90 | 91 | 92 | 93 |

94 | 95 | {/* Right Nav Buttons */} 96 |

97 | 98 | 99 | Help 100 | 101 | 102 | 103 | Microsoft Docs 104 | 105 | 106 | JSON Formatting 107 | 108 | 109 | SharePoint Fabric 110 | 111 | 112 | 113 | Useful Tools 114 | 115 | 116 | JSON Lint 117 | 118 | 119 | 120 | App Specific 121 | 122 | 123 | YouTube Tutorial 124 | 125 | 126 | Source Code 127 | 128 | 129 | 130 |

131 | 132 | 133 | 134 | 135 |

136 | ) 137 | } 138 | } 139 | 140 | 141 | // Verbose Schema 142 | // https://gist.github.com/thechriskent/2e09be14a4b491cfae256220cfca6310 143 | 144 | export default TopNavigation; 145 | -------------------------------------------------------------------------------- /src/data.js: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | Attributes: { 4 | 'href': { 5 | 'placeholder': 'URL' 6 | }, 7 | 'target': { 8 | 'options': '_blank,_self,_parent,_top' 9 | } 10 | , 11 | 'class': { 12 | 'options': 'sp-field-customFormatBackground,sp-field-severity--good,sp-field-severity--low,sp-field-severity--warning,sp-field-severity--blocked,sp-field-dataBars,sp-field-trending--up,sp-field-trending--down,sp-field-quickAction' 13 | }, 14 | 'iconName': {} 15 | }, 16 | CSSProperties: { 17 | 'background-color': { 18 | 'placeholder': '#hex -- color' 19 | }, 20 | 'font-size': { 21 | 'placeholder': '18px -- 150% ' 22 | }, 23 | 'text-align': { 24 | 'options': 'left,right,center,justify' 25 | }, 26 | 'border': { 27 | 'placeholder': '4px solid black' 28 | }, 29 | 'border-radius': {}, 30 | 'font-weight': { 31 | 'options': 'bold,semibold' 32 | }, 33 | 34 | 'color': { 35 | 'placeholder': '#hex -- color' 36 | }, 37 | 'width': {}, 38 | 'max-height': {}, 39 | 'overflow': { 40 | 'options': 'scroll,hidden,auto,visible' 41 | } 42 | }, 43 | customRowActions: { 44 | 'action': { 45 | 'options': 'executeFlow,share,defaultClick' 46 | }, 47 | 'actionParams': { 48 | 'options': '{\\"id\\": \\"FLOW_ID\\"}' 49 | } 50 | }, 51 | customColors: { 52 | 'Transparent': 'transparent', 53 | 'Green': '#98FB98', 54 | 'Yellow': '#FFFF66', 55 | 'Orange': '#FFA450', 56 | 'Red': '#FF6A6A', 57 | 'Blue': '#5078FF', 58 | 'Purple': '#B350FF', 59 | 'Custom': '#' 60 | }, 61 | template_completedInProgressLate: { 62 | properties: [ 63 | { 64 | name: 'background-color', 65 | value: [ 66 | { 67 | operator: '==', 68 | operand: '@currentField', 69 | operand2: 'Completed', 70 | value: '#98fb98' 71 | }, 72 | { 73 | operator: '==', 74 | operand: '@currentField', 75 | operand2: 'In Progress', 76 | value: '#FFFF66' 77 | }, 78 | { 79 | operator: '==', 80 | operand: '@currentField', 81 | operand2: 'Late', 82 | value: '#ff6a6a' 83 | } 84 | ] 85 | } 86 | ] 87 | }, 88 | template_dataBars_one: { 89 | attributes: [ 90 | { 91 | name: 'class', 92 | value: 'sp-field-dataBars' 93 | } 94 | ], 95 | properties: [ 96 | { 97 | name: 'width', 98 | value: 'Number(@currentField)**Number(100)++%' 99 | } 100 | ] 101 | }, 102 | template_dataBars_hundred: { 103 | attributes: [ 104 | { 105 | name: 'class', 106 | value: 'sp-field-dataBars' 107 | } 108 | ], 109 | properties: [ 110 | { 111 | name: 'width', 112 | value: '@currentField++%' 113 | } 114 | ] 115 | }, 116 | template_buttonWithLinkandIcon: { 117 | // button 118 | // currentText = " ++@currentField 119 | properties: [ 120 | { 121 | name: 'display', 122 | value: 'block' 123 | }, 124 | { 125 | name: 'width', 126 | value: '9em' 127 | }, 128 | { 129 | name: 'background-color', 130 | value: '#FFA450' 131 | }, 132 | { 133 | name: 'border', 134 | value: '2px solid black' 135 | }, 136 | { 137 | name: "border-radius", 138 | value: "15px" 139 | }, 140 | ], 141 | children: [ 142 | { 143 | name: { 144 | elmType: "a", 145 | textContent: " ++@currentField", 146 | properties: [ 147 | { 148 | name: "text-decoration", 149 | value: "none" 150 | } 151 | ], 152 | attributes: [ 153 | { 154 | name: "target", 155 | value: "_blank" 156 | }, 157 | { 158 | name: "href", 159 | value: "https://www.google.com?ID=++[$ID]" 160 | }, 161 | { 162 | name: "iconName", 163 | value: "Link" 164 | } 165 | ] 166 | }, 167 | value: '' 168 | }, 169 | 170 | ] 171 | // children: [ 172 | // { 173 | 174 | // ] 175 | 176 | // child: a 177 | // target = _blank 178 | // href = 179 | 180 | }, 181 | 182 | 183 | 184 | modalBody_TextContentHelp: ` 185 | @currentField - refers to text in current field.
186 | @currentField.title - Person fields are represented in the system as objects, and a person’s display name is contained within that object’s title property
187 | @currentField.lookupValue - Lookup fields are also represented as objects; the display text is stored in the lookupValue property
188 | @now - current date/time
189 | @me - current user's email
190 | [$FieldName] - refers to value in field on same row
191 | [$PeoplePicker.email] - refers to email of the person in a people picker field
192 | People picker field properties: id, title, email, sip, picture 193 |

194 | 195 | Basic math functions (parenthases () are also supported):
196 | multiply (**), divide (//), add (++), subtract (--)

197 | 198 | Functions:
199 | toString(), Number(), Date(), cos(), sin(),
200 | toLocaleString() [Displays a date type fully expanded with date and time],
201 | toLocaleDateString() [Displays a date type with just the date],
202 | toLocaleTimeString() [Displays a date type with just the time] 203 |

204 |
205 | Note: If you have spaces in the field name, those are defined as _x0020_. For example, a field named "Due Date" should be referenced as $Due_x0020_Date.

206 | Note2: Use ++ to concatenate 207 | ` 208 | 209 | } 210 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import 'bootstrap/dist/css/bootstrap.min.css'; 4 | import './index.css'; 5 | import App from './App'; 6 | import registerServiceWorker from './registerServiceWorker'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | registerServiceWorker(); 10 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/pollyfills.js: -------------------------------------------------------------------------------- 1 | if (!String.prototype.repeat) { 2 | String.prototype.repeat = function(count) { 3 | 'use strict'; 4 | if (this == null) { 5 | throw new TypeError('can\'t convert ' + this + ' to object'); 6 | } 7 | var str = '' + this; 8 | count = +count; 9 | if (count != count) { 10 | count = 0; 11 | } 12 | if (count < 0) { 13 | throw new RangeError('repeat count must be non-negative'); 14 | } 15 | if (count == Infinity) { 16 | throw new RangeError('repeat count must be less than infinity'); 17 | } 18 | count = Math.floor(count); 19 | if (str.length == 0 || count == 0) { 20 | return ''; 21 | } 22 | // Ensuring count is a 31-bit integer allows us to heavily optimize the 23 | // main part. But anyway, most current (August 2014) browsers can't handle 24 | // strings 1 << 28 chars or longer, so: 25 | if (str.length * count >= 1 << 28) { 26 | throw new RangeError('repeat count must not overflow maximum string size'); 27 | } 28 | var rpt = ''; 29 | for (var i = 0; i < count; i++) { 30 | rpt += str; 31 | } 32 | return rpt; 33 | } 34 | } 35 | 36 | if (!String.prototype.includes) { 37 | String.prototype.includes = function(search, start) { 38 | 'use strict'; 39 | if (typeof start !== 'number') { 40 | start = 0; 41 | } 42 | 43 | if (start + search.length > this.length) { 44 | return false; 45 | } else { 46 | return this.indexOf(search, start) !== -1; 47 | } 48 | }; 49 | } -------------------------------------------------------------------------------- /src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ' 45 | ); 46 | }); 47 | } else { 48 | // Is not local host. Just register service worker 49 | registerValidSW(swUrl); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | installingWorker.onstatechange = () => { 62 | if (installingWorker.state === 'installed') { 63 | if (navigator.serviceWorker.controller) { 64 | // At this point, the old content will have been purged and 65 | // the fresh content will have been added to the cache. 66 | // It's the perfect time to display a "New content is 67 | // available; please refresh." message in your web app. 68 | console.log('New content is available; please refresh.'); 69 | } else { 70 | // At this point, everything has been precached. 71 | // It's the perfect time to display a 72 | // "Content is cached for offline use." message. 73 | console.log('Content is cached for offline use.'); 74 | } 75 | } 76 | }; 77 | }; 78 | }) 79 | .catch(error => { 80 | console.error('Error during service worker registration:', error); 81 | }); 82 | } 83 | 84 | function checkValidServiceWorker(swUrl) { 85 | // Check if the service worker can be found. If it can't reload the page. 86 | fetch(swUrl) 87 | .then(response => { 88 | // Ensure service worker exists, and that we really are getting a JS file. 89 | if ( 90 | response.status === 404 || 91 | response.headers.get('content-type').indexOf('javascript') === -1 92 | ) { 93 | // No service worker found. Probably a different app. Reload the page. 94 | navigator.serviceWorker.ready.then(registration => { 95 | registration.unregister().then(() => { 96 | window.location.reload(); 97 | }); 98 | }); 99 | } else { 100 | // Service worker found. Proceed as normal. 101 | registerValidSW(swUrl); 102 | } 103 | }) 104 | .catch(() => { 105 | console.log( 106 | 'No internet connection found. App is running in offline mode.' 107 | ); 108 | }); 109 | } 110 | 111 | export function unregister() { 112 | if ('serviceWorker' in navigator) { 113 | navigator.serviceWorker.ready.then(registration => { 114 | registration.unregister(); 115 | }); 116 | } 117 | } 118 | --------------------------------------------------------------------------------

SharePoint Helper

Child {this.props.index + 1}