@cocreate/cocreatejs
Version:
A collaborative low code headless CMS and Javascript framework for building collaborative no code platforms, apps and UI's. Build powerful applications using HTML5 attributes or Javascript api.
968 lines (952 loc) • 104 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CoCreateJS Objects Documentation</title>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="https://cocreate.app/images/favicon.ico" />
<meta
name="description"
content="Utility first css framework, design faster and improve on your css by using native inline styles as classes. No learning curve, use what you already know" />
<meta
name="keywords"
content="helper classes, utility classes, css framework, css library, inline style classes" />
<meta name="robots" content="index,follow" />
<meta
property="og:image"
content="https://cdn.cocreate.app/docs/boilerplate.png" />
<link
rel="stylesheet"
href="../index.css"
array="files"
object="60888216117c640e7596303f"
key="src"
type="text/css"
save="true"
parse="true" />
<link rel="manifest" href="/manifest.webmanifest" />
</head>
<body>
<nav
content_id="content"
scroll="sticky-nav,"
scroll-up="5"
scroll-down="5"
path="../"
src="../components/navbar.html"></nav>
<sidenav
id="menuL"
class="top:0px left:0px width:0px width:300px@xl"
resizable
resize-selector="document; main, document; nav, document; footer"
resize-attribute="style"
resize-property="margin-left">
<menu path="../" src="./components/menu.html"></menu>
<div resize="right"></div>
</sidenav>
<main
class="padding-top:15px padding:15px@lg@xl"
content_id="content"
id="cocreate-xxxxx">
<div
class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
<div class="display:flex align-items:center">
<h2>CoCreateJS</h2>
</div>
<div
class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px">
<div
class="display:flex align-items:center transition:0.3s padding-left:10px"
share-network="true"
share-text="Enter decription here"
share-title="testing im a title"
share-height="600"
share-width="700"
share-media="https://cdn.cocreate.app/docs/boilerplate.png"
hover="display:block!important"
hover-selector=".social-networks">
<div class="display:none social-networks">
<a
class="margin-right:15px"
share-network="twitter"
title="Share on twitter"
><i src="/assets/svg/twitter.svg"></i
></a>
<a
class="margin-right:15px"
share-network="facebook"
title="Share on Facebook"
><i src="/assets/svg/facebook.svg"></i
></a>
<a
class="margin-right:15px"
share-network="instagram"
title="Share on instagram"
><i src="/assets/svg/instagram.svg"></i
></a>
</div>
<a
class="margin-right:15px"
share-network="share"
title="Share on share"
><i src="/assets/svg/share-alt.svg"></i
></a>
</div>
<a
href="https://github.com/CoCreate-app/CoCreateJS"
target="_blank"
class="margin-right:15px"
><i src="/assets/svg/github.svg"></i
></a>
</div>
</div>
<p class="max-width:500px margin-bottom:20px">
Learn how to convert your html into a dynamic realtime
application.
</p>
<div
array=""
object=""
key=""
id="crud_objects"
class="padding:35px_0px">
<h1>CRUD Objects</h1>
<p class="max-width:500px margin-bottom:20px">
Simple objects you can use to create custom components.
</p>
<a
href="#create-crud"
id="create-crud"
show=".create,.crudplusicon"
hide=".create,.crud">
<h3
class="padding:15px_0px border-top border-bottom:1px_solid_lightgrey">
<span class="create crudplusicon" hidden
><i
class="height:16px"
src="/assets/svg/plus.svg"></i
></span>
<span class="create crud"
><i
class="height:16px"
src="/assets/svg/minus.svg"></i
></span>
<span>Create Document Parameters</span>
</h3>
</a>
<div
class="display:flex flex-wrap:wrap border-bottom:1px_solid_lightgrey create crud">
<div class="flex-grow:1 width:300px padding:0px_10px">
<ul class="list-style-type:none padding-right:15px">
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>namespace</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>create namespace</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>rooms</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>creates room</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>broadcast</span>
<span class="cocreate-badge success"
>boolean</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>broadcast or only save to db</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>array</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge danger"
>required</span
>
</h4>
<p>array to save to</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>object</span>
<span class="cocreate-badge success"
>array</span
>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>data to save</p>
</li>
<li class="padding:15px_0px">
<h4>
<span>metaData</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge success"
>array</span
>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Additonal data in the form of a string ,
array or object
</p>
</li>
</ul>
</div>
<div class="flex-grow:1 width:300px padding:0px_10px">
<pre>
<code class="language-js">
crud.createDocument({
array: "string",
object: {
name1: "hello"
name2: "hello1"
}
})
</code>
</pre>
</div>
</div>
<a
href="#read-crud"
id="read-crud"
show=".read,.crudplusicon"
hide=".read,.crud">
<h3
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<span class="read crudplusicon"
><i
class="height:16px"
src="/assets/svg/plus.svg"></i
></span>
<span class="read crud" hidden
><i
class="height:16px"
src="/assets/svg/minus.svg"></i
></span>
<span>Read Document Parameters</span>
</h3>
</a>
<div
class="display:flex flex-wrap:wrap border-bottom:1px_solid_lightgrey read crud"
hidden>
<div class="flex-grow:1 width:300px padding:0px_10px">
<ul class="list-style-type:none padding-right:15px">
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>array</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge danger"
>required</span
>
</h4>
<p>array to save to</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>object</span>
<span class="cocreate-badge success"
>_id</span
>
<span class="cocreate-badge danger"
>required</span
>
</h4>
<p>object to read from</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>name</span>
<span class="cocreate-badge success"
>array</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
names of values to from CMS. If not used
whole object will be fetched
</p>
</li>
<li class="padding:15px_0px">
<h4>
<span>metaData</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge success"
>array</span
>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Additonal data in the form of a string
,array or object
</p>
</li>
</ul>
</div>
<div class="flex-grow:1 width:300px padding:0px_10px">
<pre>
<code class="language-js">
crud.readDocument({
array: "module",
object : {
_id: "",
name: ''
...
}
})
</code>
</pre>
</div>
</div>
<a
href="#update-crud"
id="update-crud"
show=".update,.crudplusicon"
hide=".update,.crud">
<h3
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<span class="update crudplusicon"
><i
class="height:16px"
src="/assets/svg/plus.svg"></i
></span>
<span class="update crud" hidden
><i
class="height:16px"
src="/assets/svg/minus.svg"></i
></span>
<span>Update Document Parameters</span>
</h3>
</a>
<div
class="display:flex flex-wrap:wrap border-bottom:1px_solid_lightgrey update crud"
hidden>
<div class="flex-grow:1 width:300px padding:0px_10px">
<ul class="list-style-type:none">
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>namespace</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>create namespace</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>rooms</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>creates room</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>broadcast</span>
<span class="cocreate-badge success"
>boolean</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>broadcast or only save to db</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>array</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge danger"
>required</span
>
</h4>
<p>array to save to</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>object</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge danger"
>required</span
>
</h4>
<p>Document _id to save to</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>data</span>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>data to save</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>metaData</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge success"
>array</span
>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Additonal data in the form of a string ,
array or object
</p>
</li>
</ul>
</div>
<div class="flex-grow:1 width:300px padding:0px_10px">
<pre>
<code class="language-js">
crud.updateDocument({
array: "test123",
object: {
_id: "object",
name1: "hello",
name2: "hello1"
},
updateName: ["name3", "name4"],
deleteName: ["name3", "name4"],
upsert: true|false //default to true
})
</code>
</pre>
</div>
</div>
<a
href="#delete-crud"
id="delete-crud"
show=".delete,.crudplusicon"
hide=".delete,.crud">
<h3
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<span class="delete crudplusicon"
><i
class="height:16px"
src="/assets/svg/plus.svg"></i
></span>
<span class="delete crud" hidden
><i
class="height:16px"
src="/assets/svg/minus.svg"></i
></span>
<span>Delete Document Parameters</span>
</h3>
</a>
<div
class="display:flex flex-wrap:wrap border-bottom:1px_solid_lightgrey delete crud"
hidden>
<div class="flex-grow:1 width:300px padding:0px_10px">
<ul class="list-style-type:none padding-right:15px">
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>namespace</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>create namespace</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>rooms</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>creates room</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>broadcast</span>
<span class="cocreate-badge success"
>boolean</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>broadcast or only save to db</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>array</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge danger"
>required</span
>
</h4>
<p>array to save to</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>object</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge danger"
>required</span
>
</h4>
<p>array to save to</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>data</span>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>data to save</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>metaData</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge success"
>array</span
>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Additonal data in the form of a string ,
array or object
</p>
</li>
</ul>
</div>
<div class="flex-grow:1 width:300px padding:0px_10px">
<pre>
<code class="language-js">
crud.deleteDocument({
array: "module",
object: {
_id: ""
}
})
</code>
</pre>
</div>
</div>
<a
href="#readlist"
id="readlist"
show=".readlist,.crudplusicon"
hide=".readlist,.crud">
<h3
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<span class="readlist crudplusicon"
><i
class="height:16px"
src="/assets/svg/plus.svg"></i
></span>
<span class="readlist crud" hidden
><i
class="height:16px"
src="/assets/svg/minus.svg"></i
></span>
<span>Read Document Filter Parameters</span>
</h3>
</a>
<div
class="display:flex flex-wrap:wrap border-bottom:1px_solid_lightgrey readlist crud"
hidden>
<div class="flex-grow:1 width:300px padding:0px_10px">
<ul class="list-style-type:none padding-right:15px">
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>array</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge danger"
>required</span
>
</h4>
<p>array to save to</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>data</span>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>data to save</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>element</span>
<span class="cocreate-badge success"
>boolean</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Save data onChange/submitBtn. If attribute
is empty or not used Default's to true.
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>metaData</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge success"
>array</span
>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Additonal data in the form of a string ,
array or object
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<a
href="#readlist-operator"
id="readlist-operator"
show=".readlist-operator,.crudplusicon"
hide=".readlist-operator,.operator">
<h4>
<span
class="readlist-operator crudplusicon"
><i
class="height:16px"
src="/assets/svg/plus.svg"></i
></span>
<span
class="readlist-operator crud"
hidden
><i
class="height:16px"
src="/assets/svg/minus.svg"></i
></span>
<span>operator</span>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge danger"
>required</span
>
</h4>
<p>
The operator object for read object list
</p>
</a>
<div
class="display:flex flex-wrap:wrap readlist-operator operator"
hidden>
<div
class="flex-grow:1 width:300px padding:0px_10px">
<ul
class="list-style-type:none padding-right:15px">
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>fetch</span>
<span
class="cocreate-badge success"
>object</span
>
<span
class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
{name: the field name for
fetching, value: the value
for fetching}
</p>
<p>
If the "fetch" parameter
define, result will fetch
the items that is [name] =
value
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>filters</span>
<span
class="cocreate-badge success"
>array[object]</span
>
<span
class="cocreate-badge danger"
>required</span
>
</h4>
<p>
The data structure for each
item: {name:
<span
class="cocreate-badge success"
>string</span
>, operator:
<span
class="cocreate-badge success"
>string</span
>, value:
<span
class="cocreate-badge success"
>array</span
>}
</p>
<div class="padding-left:15px">
<p>
<strong>name:</strong>
The field name
</p>
<p>
<strong
>operator:</strong
>
Query operator (includes
| $range | $eq | $ne |
$lt | $lte | $gt | $gte
| $in | $nin |
$geoWithin)
</p>
<p>
<strong>value:</strong>
The operator values
</p>
</div>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>orders</span>
<span
class="cocreate-badge success"
>array[object]</span
>
<span
class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
The data structure for each
item: {name:
<span
class="cocreate-badge success"
>string</span
>, type:
<span
class="cocreate-badge success"
>integer</span
>}
</p>
<div class="padding-left:15px">
<p>
<strong>name:</strong>
The field name
</p>
<p>
<strong>type:</strong>
The order type(-1: desc,
1: asc)
</p>
</div>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>search</span>
<span
class="cocreate-badge success"
>object</span
>
<span
class="cocreate-badge warning"
>optional</span
>
</h4>
<p>All fields values search</p>
<div class="padding-left:15px">
<p>
<strong>type</strong
><span
class="cocreate-badge success"
>string(or|and)</span
>: The search type (or |
and)
</p>
<p>
<strong>value</strong
><span
class="cocreate-badge success"
>array</span
>: The search values
</p>
</div>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>index</span>
<span
class="cocreate-badge success"
>integer</span
>
<span
class="cocreate-badge danger"
>required</span
>
</h4>
<p>
Set the start index that
fetch items. If don't need
it, index can define 0
</p>
</li>
<li class="padding:15px_0px">
<h4>
<span>count</span>
<span
class="cocreate-badge success"
>integer</span
>
<span
class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Set the count that fetch
items. If count didn't
defined, it will fetch whole
result items
</p>
</li>
</ul>