A Reactjs and Vuejs Component of Schema Based Json Editor

schema-based-json-editor

features

• reactjs component
• vuejs component
• common schema fields: title, description, default, readonly, $ref, propertyOrder, requiredWhen, optionalWhen, className, propertyName
• object schema fields: properties, required, maxProperties, minProperties, collapsed
• array schema fields: items, minItems, uniqueItems, enum, enumTitles, format(‘select2’)
• number and integer schema fields: minimum, exclusiveMinimum, maximum, exclusiveMaximum, enum, multipleOf, enumTitles, format(‘select’ | ‘radiobox’)
• string schema fields: format(‘textarea’ | ‘color’ | ‘date’ | ‘datetime’ | ‘datetime-local’ | ‘time’ | ‘month’ | ‘email’ | ‘uri’ | ‘url’ | ‘week’ | ‘hostname’ | ‘ipv4’ | ‘ipv6’ | ‘code’ | ‘markdown’ | ‘base64’ | ‘select’ | ‘radiobox’ | ‘json’), enum, minLength, maxLength, pattern, enumTitles
• boolean schema fields: format(‘checkbox’ | ‘select’ | ‘select2’)
• image preview, code highlight, markdown preview
• multi-language

reactjs component

npm i react-schema-based-json-editor

import { JSONEditor } from "react-schema-based-json-editor";

or

<script src="./node_modules/react/umd/react.production.min.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
<script src="./node_modules/react-schema-based-json-editor/dist/react-schema-based-json-editor.min.js"></script>

<JSONEditor schema={schema}
    initialValue={initialValue}
    updateValue={this.updateValue}
    theme="bootstrap3"
    icon="fontawesome4">
</JSONEditor>

the online demo: https://plantain-00.github.io/schema-based-json-editor/packages/react/demo

vuejs component

npm i vue-schema-based-json-editor

import "vue-schema-based-json-editor";

or

<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/vue-class-component/dist/vue-class-component.min.js"></script>
<script src="./node_modules/vue-schema-based-json-editor/dist/vue-schema-based-json-editor.min.js"></script>

<json-editor :schema="schema"
    :initial-value="value"
    @update-value="updateValue($event)"
    theme="bootstrap3"
    icon="fontawesome4">
</json-editor>

the online demo: https://plantain-00.github.io/schema-based-json-editor/packages/vue/demo

properties and events of the component

name	type	description
schema	Schema	the json schema object
initialValue	ValueType	the initial json
updateValue	(value: ValueType or undefined, isValid: boolean) => void	the function that is invoked when the json is edited in the editor
theme	string?	support “bootstrap3” “bootstrap4” “antd3” “element-ui2” “iview2” “iview3” “blueprint1” “blueprint2” “blueprint3” for now
icon	string?	support “bootstrap3” “fontawesome4” “fontawesome5” “antd3” “element-ui2” “iview2” “iview3” for now
locale	Locale?	locale object
readonly	boolean?	readonly
dragula	object?	the dragula library object if you want to reorder array by drag and drop
markdownit	object?	the markdown-it library object if you want to preview markdown
hljs	object?	the highlight.js library object if you want to highlight code
forceHttps	boolean?	if true, the preview url of images will be https:// rather than http://
disableCollapse	boolean?	if true, the collapse button will be hidden
noSelect2	boolean?	if true, use select rather than select2-component
minItemCountIfNeedFilter	number?	default 6(if item count > 6, filter is visible, otherwise hidden), so if 0, filter always visible, if Infinity, filter always hidden
monacoEditor	object?	the monacoEditor library object if you want to edit code with it

improve current theme

You can find css classes like schema-based-json-editor--*, you can set their styles to improve UI

The full list of the classes are in:

export const defaultTheme = {
  card: 'schema-based-json-editor--card',
  row: 'schema-based-json-editor--row',
  errorRow: 'schema-based-json-editor--error-row',
  input: 'schema-based-json-editor--input',
  errorInput: 'schema-based-json-editor--error-input',
  textarea: 'schema-based-json-editor--textarea',
  errorTextarea: 'schema-based-json-editor--error-textarea',
  checkbox: 'schema-based-json-editor--checkbox',
  radiobox: 'schema-based-json-editor--radiobox',
  button: 'schema-based-json-editor--button',
  buttonGroup: 'schema-based-json-editor--button-group',
  title: 'schema-based-json-editor--title',
  description: 'schema-based-json-editor--description',
  select: 'schema-based-json-editor--select'
}

You can also set className in schema to get fine grained style control

support other themes / icons / locales

import { themes, icons, locales } from 'schema-based-json-editor'

themes['new-theme-name'] = { ... }
icons['new-icon-name'] = { ... }
locales['new-locale-name'] = { ... }

the data structure of new themes / icons / locales are just like default ones:

export const bootstrap3Icon = {
  isText: false,
  collapse: 'glyphicon glyphicon-chevron-down',
  expand: 'glyphicon glyphicon-chevron-right',
  add: 'glyphicon glyphicon-plus',
  delete: 'glyphicon glyphicon-remove'
}

export const defaultLocale = {
  button: {
    collapse: 'Collapse',
    expand: 'Expand',
    add: 'Add',
    delete: 'Delete'
  },
  error: {
    minLength: 'Value must be at least {0} characters long.',
    maxLength: 'Value must be at most {0} characters long.',
    pattern: "Value doesn't match the pattern {0}.",
    minimum: 'Value must be >= {0}.',
    maximum: 'Value must be <= {0}.',
    largerThan: 'Value must be > {0}.',
    smallerThan: 'Value must be < {0}.',
    minItems: 'The length of the array must be >= {0}.',
    uniqueItems: 'The item in {0} and {1} must not be same.',
    multipleOf: 'Value must be multiple value of {0}.',
    minProperties: 'Properties count must be >= {0}.',
    maxProperties: 'Properties count must be <= {0}.'
  },
  info: {
    notExists: 'not exists',
    true: 'true',
    false: 'false',
    search: 'search'
  },
  markdownTipLocale: defaultMarkDownTipLocale,
  fileUploaderLocale: defaultFileUploaderLocale
}

non-standard fields

field	type	description
propertyOrder	number?	in a object, the property with smaller propertyOrder will be closer to the top
requiredWhen	[string, ‘===’ or ‘in’ or ‘isUndefined’, any]?	in a object, the property is required when the condition is true, eg, ['name', '===', 'foo'] or ['name', 'in', ['foo', 'bar']] or ['name', 'isUndefined'], otherwise the property is hidden
optionalWhen	[string, ‘===’ or ‘in’ or ‘isUndefined’, any]?	in a object, the property is optional when the condition is true, eg, ['name', '===', 'foo'] or ['name', 'in', ['foo', 'bar']] or ['name', 'isUndefined'], otherwise the property is hidden
collapsed	boolean?	if true, the object or array is collapsed by default
enumTitles	string[]?	works with enum field, are the titles of the enum
className	string?	custom class name
step	number?	in a string, works with format time
propertyName	string?	in a object, used as property name

change logs

https://github.com/plantain-00/schema-based-json-editor/tree/master/change_logs.md

Download Details:

Author: plantain-00

Source Code: https://github.com/plantain-00/schema-based-json-editor

#vuejs #reactjs #javascript #vue

What is GEEK

Buddha Community

SCHEMAS in SQL Server -MS SQL Server – Zero to Hero Query Master

Introduction

This is part 3 of “MS SQL Server- Zero to Hero” and in this article, we will be discussing about the SCHEMAS in SQL SERVER. Before getting into this article, please consider to visit previous articles in this series from below,

• MS SQL Server – Zero to Hero Query Master – Part 1
• MS SQL Server – Zero to Hero Query Master – Part 2

A glimpse of previous articles

Part 1

In part one, we learned the basics of data, database, database management system, and types of DBMS and SQL.

Part 2

• We learned to create a database and maintain it using SQL statements.
• Best practice methods were also mentioned.

#sql server #benefits of schemas #create schema in sql #database schemas #how to create schema in sql server #schemas #schemas in sql server #sql server schemas #what is schema in sql server

A Reactjs and Vuejs Component of Schema Based Json Editor

schema-based-json-editor

features

• reactjs component
• vuejs component
• common schema fields: title, description, default, readonly, $ref, propertyOrder, requiredWhen, optionalWhen, className, propertyName
• object schema fields: properties, required, maxProperties, minProperties, collapsed
• array schema fields: items, minItems, uniqueItems, enum, enumTitles, format(‘select2’)
• number and integer schema fields: minimum, exclusiveMinimum, maximum, exclusiveMaximum, enum, multipleOf, enumTitles, format(‘select’ | ‘radiobox’)
• string schema fields: format(‘textarea’ | ‘color’ | ‘date’ | ‘datetime’ | ‘datetime-local’ | ‘time’ | ‘month’ | ‘email’ | ‘uri’ | ‘url’ | ‘week’ | ‘hostname’ | ‘ipv4’ | ‘ipv6’ | ‘code’ | ‘markdown’ | ‘base64’ | ‘select’ | ‘radiobox’ | ‘json’), enum, minLength, maxLength, pattern, enumTitles
• boolean schema fields: format(‘checkbox’ | ‘select’ | ‘select2’)
• image preview, code highlight, markdown preview
• multi-language

reactjs component

npm i react-schema-based-json-editor

import { JSONEditor } from "react-schema-based-json-editor";

or

<script src="./node_modules/react/umd/react.production.min.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
<script src="./node_modules/react-schema-based-json-editor/dist/react-schema-based-json-editor.min.js"></script>

<JSONEditor schema={schema}
    initialValue={initialValue}
    updateValue={this.updateValue}
    theme="bootstrap3"
    icon="fontawesome4">
</JSONEditor>

the online demo: https://plantain-00.github.io/schema-based-json-editor/packages/react/demo

vuejs component

npm i vue-schema-based-json-editor

import "vue-schema-based-json-editor";

or

<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/vue-class-component/dist/vue-class-component.min.js"></script>
<script src="./node_modules/vue-schema-based-json-editor/dist/vue-schema-based-json-editor.min.js"></script>

<json-editor :schema="schema"
    :initial-value="value"
    @update-value="updateValue($event)"
    theme="bootstrap3"
    icon="fontawesome4">
</json-editor>

the online demo: https://plantain-00.github.io/schema-based-json-editor/packages/vue/demo

properties and events of the component

name	type	description
schema	Schema	the json schema object
initialValue	ValueType	the initial json
updateValue	(value: ValueType or undefined, isValid: boolean) => void	the function that is invoked when the json is edited in the editor
theme	string?	support “bootstrap3” “bootstrap4” “antd3” “element-ui2” “iview2” “iview3” “blueprint1” “blueprint2” “blueprint3” for now
icon	string?	support “bootstrap3” “fontawesome4” “fontawesome5” “antd3” “element-ui2” “iview2” “iview3” for now
locale	Locale?	locale object
readonly	boolean?	readonly
dragula	object?	the dragula library object if you want to reorder array by drag and drop
markdownit	object?	the markdown-it library object if you want to preview markdown
hljs	object?	the highlight.js library object if you want to highlight code
forceHttps	boolean?	if true, the preview url of images will be https:// rather than http://
disableCollapse	boolean?	if true, the collapse button will be hidden
noSelect2	boolean?	if true, use select rather than select2-component
minItemCountIfNeedFilter	number?	default 6(if item count > 6, filter is visible, otherwise hidden), so if 0, filter always visible, if Infinity, filter always hidden
monacoEditor	object?	the monacoEditor library object if you want to edit code with it

improve current theme

You can find css classes like schema-based-json-editor--*, you can set their styles to improve UI

The full list of the classes are in:

export const defaultTheme = {
  card: 'schema-based-json-editor--card',
  row: 'schema-based-json-editor--row',
  errorRow: 'schema-based-json-editor--error-row',
  input: 'schema-based-json-editor--input',
  errorInput: 'schema-based-json-editor--error-input',
  textarea: 'schema-based-json-editor--textarea',
  errorTextarea: 'schema-based-json-editor--error-textarea',
  checkbox: 'schema-based-json-editor--checkbox',
  radiobox: 'schema-based-json-editor--radiobox',
  button: 'schema-based-json-editor--button',
  buttonGroup: 'schema-based-json-editor--button-group',
  title: 'schema-based-json-editor--title',
  description: 'schema-based-json-editor--description',
  select: 'schema-based-json-editor--select'
}

You can also set className in schema to get fine grained style control

support other themes / icons / locales

import { themes, icons, locales } from 'schema-based-json-editor'

themes['new-theme-name'] = { ... }
icons['new-icon-name'] = { ... }
locales['new-locale-name'] = { ... }

the data structure of new themes / icons / locales are just like default ones:

export const bootstrap3Icon = {
  isText: false,
  collapse: 'glyphicon glyphicon-chevron-down',
  expand: 'glyphicon glyphicon-chevron-right',
  add: 'glyphicon glyphicon-plus',
  delete: 'glyphicon glyphicon-remove'
}

export const defaultLocale = {
  button: {
    collapse: 'Collapse',
    expand: 'Expand',
    add: 'Add',
    delete: 'Delete'
  },
  error: {
    minLength: 'Value must be at least {0} characters long.',
    maxLength: 'Value must be at most {0} characters long.',
    pattern: "Value doesn't match the pattern {0}.",
    minimum: 'Value must be >= {0}.',
    maximum: 'Value must be <= {0}.',
    largerThan: 'Value must be > {0}.',
    smallerThan: 'Value must be < {0}.',
    minItems: 'The length of the array must be >= {0}.',
    uniqueItems: 'The item in {0} and {1} must not be same.',
    multipleOf: 'Value must be multiple value of {0}.',
    minProperties: 'Properties count must be >= {0}.',
    maxProperties: 'Properties count must be <= {0}.'
  },
  info: {
    notExists: 'not exists',
    true: 'true',
    false: 'false',
    search: 'search'
  },
  markdownTipLocale: defaultMarkDownTipLocale,
  fileUploaderLocale: defaultFileUploaderLocale
}

non-standard fields

field	type	description
propertyOrder	number?	in a object, the property with smaller propertyOrder will be closer to the top
requiredWhen	[string, ‘===’ or ‘in’ or ‘isUndefined’, any]?	in a object, the property is required when the condition is true, eg, ['name', '===', 'foo'] or ['name', 'in', ['foo', 'bar']] or ['name', 'isUndefined'], otherwise the property is hidden
optionalWhen	[string, ‘===’ or ‘in’ or ‘isUndefined’, any]?	in a object, the property is optional when the condition is true, eg, ['name', '===', 'foo'] or ['name', 'in', ['foo', 'bar']] or ['name', 'isUndefined'], otherwise the property is hidden
collapsed	boolean?	if true, the object or array is collapsed by default
enumTitles	string[]?	works with enum field, are the titles of the enum
className	string?	custom class name
step	number?	in a string, works with format time
propertyName	string?	in a object, used as property name

change logs

https://github.com/plantain-00/schema-based-json-editor/tree/master/change_logs.md

Download Details:

Author: plantain-00

Source Code: https://github.com/plantain-00/schema-based-json-editor

#vuejs #reactjs #javascript #vue

What is JSON? | JSON Objects and JSON Arrays | Working with JSONs Tutorial

In this video, we work with JSONs, which are a common data format for most web services (i.e. APIs). Thank you for watching and happy coding!

Need some new tech gadgets or a new charger? Buy from my Amazon Storefront https://www.amazon.com/shop/blondiebytes

What is an API?
https://youtu.be/T74OdSCBJfw

JSON Google Extension
https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=en

Endpoint Example
http://maps.googleapis.com/maps/api/geocode/json?address=13+East+60th+Street+New+York,+NY

Check out my courses on LinkedIn Learning!
REFERRAL CODE: https://linkedin-learning.pxf.io/blondiebytes
https://www.linkedin.com/learning/instructors/kathryn-hodge

Support me on Patreon!
https://www.patreon.com/blondiebytes

Check out my Python Basics course on Highbrow!
https://gohighbrow.com/portfolio/python-basics/

Check out behind-the-scenes and more tech tips on my Instagram!
https://instagram.com/blondiebytes/

Free HACKATHON MODE playlist:
https://open.spotify.com/user/12124758083/playlist/6cuse5033woPHT2wf9NdDa?si=VFe9mYuGSP6SUoj8JBYuwg

MY FAVORITE THINGS:
Stitch Fix Invite Code: https://www.stitchfix.com/referral/10013108?sod=w&som=c
FabFitFun Invite Code: http://xo.fff.me/h9-GH
Uber Invite Code: kathrynh1277ue
Postmates Invite Code: 7373F
SoulCycle Invite Code: https://www.soul-cycle.com/r/WY3DlxF0/
Rent The Runway: https://rtr.app.link/e/rfHlXRUZuO

Want to BINGE?? Check out these playlists…

Quick Code Tutorials: https://www.youtube.com/watch?v=4K4QhIAfGKY&index=1&list=PLcLMSci1ZoPu9ryGJvDDuunVMjwKhDpkB

Command Line: https://www.youtube.com/watch?v=Jm8-UFf8IMg&index=1&list=PLcLMSci1ZoPvbvAIn_tuSzMgF1c7VVJ6e

30 Days of Code: https://www.youtube.com/watch?v=K5WxmFfIWbo&index=2&list=PLcLMSci1ZoPs6jV0O3LBJwChjRon3lE1F

Intermediate Web Dev Tutorials: https://www.youtube.com/watch?v=LFa9fnQGb3g&index=1&list=PLcLMSci1ZoPubx8doMzttR2ROIl4uzQbK

GitHub | https://github.com/blondiebytes

Twitter | https://twitter.com/blondiebytes

LinkedIn | https://www.linkedin.com/in/blondiebytes

#jsons #json arrays #json objects #what is json #jsons tutorial #blondiebytes

JSON Schema, Schema.org, JSON-LD: What’s the Difference?

Recently, I have seen several questions like “what’s the difference between JSON-LD and JSON Schema” or “can I use JSON Schema and Schema.org”. I come from a linked data background (which is close to the world of Schema.org) but have recently started using JSON Schema a lot and I have to admit that there is no trivial answer to these questions. There is the obvious similarity in the standard names like “Schema” and “JSON”. If you compare the Schema.org page for  Person to this  example on the JSON Schema page, you have to admit that they kind of look alike. Combine this with the fact that Schema.org touts JSON-LD, which — by design — very much looks like regular JSON completes the confusion. So there definitely are enough reasons to write this article.

JSON Schema

JSON Schema is to JSON what XML Schema is to XML. It allows you to specify the structure of a JSON document. You can state that the field “email” must follow a certain regular expression or that an address has “street_name”, “number”, and “street_type” fields.  Michael Droettboom’s book  “Understanding JSON Schema” illustrates validation quite nicely with red & green examples.

The main use case for JSON Schema seems to be in JSON APIs where it plays two major roles:

1. Clients and servers can validate request and response objects in a generic way. This makes development a lot easier, since the implementation can “outsource” these checks to a standard component. Once a message passed the validation, you can safely assume that the document adheres to the rules.
2. As with any API, documentation is key when developers write code that uses it. JSON Schema is increasingly used to describe the structure of requests and responses by embedding it in an overall API description. Swagger is probably the most prominent example of this paradigm. Consider the pet-store example. Scroll all the way down on the page and you see this JSON Schema definition of “Pet”, which is a basic element in requests and responses of this API (you can find the actual JSON Schema embedded in the raw Swagger file — note that currently there are still some differences between the OpenAPI specification and JSON Schema which will be resolved with OpenAPI 3.1).

As with all things related to code, reuse is a good idea. JSON Schema has the ability to import schemas using the $ref keyword. There are also efforts to share schemas.  JSON Schema Store is one example. Its main use case is to support syntax highlighting for editors, for instance when editing a swagger file. At the time of writing, it contains over 250 schemas including — drum-roll please / you certainly guessed it — Schema.org. These describe things like  Action and  Place. So the idea could be to centrally define JSON Schema building blocks that can be re-used in different APIs, making it easier to consume them, maybe even to the point where intelligent software can interact with APIs automatically. But before we get carried away, let’s have a look at Schema.org.

#schema #swagger #json-ld #json-schema

Hire Dedicated VueJS Developers

Want to Hire VueJS Developer to develop an amazing app?

Hire Dedicated VueJS Developers on the contract (time/project) basis providing regular reporting about your app. We, at HourlyDeveloper.io, implement the right strategic approach to offer a wide spectrum of vue.js development services to suit your requirements at most competitive prices.

Consult with us:- https://bit.ly/2C5M6cz

#hire dedicated vuejs developers #vuejs developer #vuejs development company #vuejs development services #vuejs development #vuejs developer