### Install Dependencies and Build System Designer (PWA)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/installation
These commands are used after cloning the repository to install project dependencies and then build the PWA version of System Designer. After building, the application can be started locally.
```bash
npm i
npm run build
npm run start
```
--------------------------------
### Run System (Node.js)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/quick-start
This command shows how to execute an exported system file (e.g., 'StarWars.js') using Node.js. This is the final step after installing the necessary runtime dependencies for server-side deployment.
```bash
node StarWars.js
```
--------------------------------
### Install System Designer via npm
Source: https://designfirst.io/systemdesigner/documentation/docs/en/installation
This snippet shows how to install the System Designer package into an existing web application using npm. After installation, the distributed files should be copied into the web project's directory.
```bash
npm i system-designer
```
--------------------------------
### Build System Designer for Electron (Desktop)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/installation
These commands are used to build the desktop version of System Designer using Electron. After the initial build, specific commands are available to package the application for macOS, Windows, and Linux.
```bash
npm run electron
# build for macOS
npm run macOS
# build for Windows
npm run windows
# build for Linux
npm run linux
```
--------------------------------
### Implement System Start Method (System Designer)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/quick-start
This JavaScript code illustrates how to define the 'start' method for a system in System Designer. It shows how to retrieve other components (like 'logger' and 'luke') using 'this.require()' and how to use them to log information, demonstrating basic system logic execution.
```JavaScript
function start() {
let luke = null,
logger = null;
// get logger component
logger = this.require('logger');
// get luke component
luke = this.require('luke');
// get the name of the father of Luke
logger.info(luke.father().fullName());
}
```
--------------------------------
### Build System Designer for Cordova (Mobile)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/installation
These commands are used to build the mobile versions of System Designer using Cordova. The process involves building for Cordova and then specifically for iOS and Android platforms.
```bash
npm run cordova
# build for ios
npx cordova build ios
# build for android
npx cordova build android
```
--------------------------------
### Server-Side Bundle Installation - JavaScript
Source: https://designfirst.io/systemdesigner/documentation/docs/en/bundle-your-javascript
Illustrates how to install a JavaScript bundle on the server-side using the 'system-runtime' module. It first requires the runtime, then installs the main bundle ('myjs.json') and any other dependent systems ('system1.json', 'system2.json') using the 'runtime.install()' method.
```javascript
let runtime = require('system-runtime');
// install your bundle
untime.install('myjs.json');
// install other systems
untime.install('system1.json');
runtime.install('system2.json');
```
--------------------------------
### Install and Run Mode-Admin-Server Extension
Source: https://designfirst.io/systemdesigner/documentation/docs/en/design-a-remote-server-system
This snippet demonstrates how to install and run the `mode-admin-server` extension within a system runtime environment. It requires the 'system-runtime' module and installs both the extension and a user-defined system.
```javascript
// require system runtime
const runtime = require('system-runtime');
// install mode-admin-server extension
runtime.install('node_modules/system-runtime/extensions/mode-admin-server.json');
// install and start your app
runtime.install('mysystem.json');
```
--------------------------------
### Client-Side Bundle Installation - HTML
Source: https://designfirst.io/systemdesigner/documentation/docs/en/bundle-your-javascript
An HTML structure for installing a JavaScript bundle client-side using System Designer. It includes linking to the bundled system ('myjs.json') and other systems ('system1.json', 'system2.json') using `` tags. It also loads the System Runtime library from a CDN.
```html
App
```
--------------------------------
### Install System Runtime - NPM
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-npm-module
Installs the System Runtime package as a dependency for your server-side application using npm.
```bash
npm install system-runtime --save
```
--------------------------------
### Install Your Module - NPM
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-npm-module
Installs your created NPM module as a dependency for your server-side application using npm.
```bash
npm install mysystem --save
```
--------------------------------
### Install Bundled System as HTML Resource
Source: https://designfirst.io/systemdesigner/documentation/docs/en/bundle-your-html
This HTML snippet shows how to install a bundled system (exported as a JSON file) as a client-side resource. It uses a custom 'link' tag with rel='system' and specifies the JSON file path. It also includes the System Designer runtime script.
```html
App
```
--------------------------------
### Application Start Method - JavaScript
Source: https://designfirst.io/systemdesigner/documentation/docs/en/bundle-your-css
This JavaScript code snippet shows the 'start' method for an application system. It demonstrates how to require a CSS component (named 'grayColor') and then call its 'render' method to apply the CSS. This is essential for integrating CSS components into an application.
```javascript
function start() {
this.require('grayColor').render();
}
```
--------------------------------
### Execute Node.js System File
Source: https://designfirst.io/systemdesigner/documentation/docs/en/export-a-system
Executes a Node.js system file using the Node.js runtime. Ensure System Runtime is installed before running this command. The filename 'mysystem.js' is an example and should be replaced with your actual file name.
```bash
node mysystem.js
```
--------------------------------
### Manipulating Collections in System Designer
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-behavior
Provides examples of how to get all items in a collection, retrieve a specific item by index, initialize a collection, and add components to a collection using JavaScript within System Designer. Collections manage arrays of components.
```javascript
// get collection value
// get all the collection
// it will be an array of components
this.children();
// get the firt element of the collection,
// a component
this.children(0);
// set collection value
// init the collection
this.children([]);
// get a component
const vader = this.require('vader');
// add the component at the first place of the collection
this.children(0, vader);
// add the component at the last place of the collection
this.children().push(vader);
```
--------------------------------
### Implement Start Behavior to Send Message
Source: https://designfirst.io/systemdesigner/documentation/docs/en/send-messages
This JavaScript function is part of the 'start' behavior and demonstrates how to send a message using the 'channel' component. It calls the 'somethingHappened' event with a sample message.
```javascript
function start() {
this.require('channel').somethingHappened('my message');
}
```
--------------------------------
### System Bundle Installation - HTML
Source: https://designfirst.io/systemdesigner/documentation/docs/en/bundle-your-css
This HTML snippet illustrates how to install a System Designer bundle (exported as a JSON file) client-side. It uses a custom link tag with 'rel="system"' and 'type="application/json"' to specify the bundle's path, alongside including the System Designer runtime script.
```html
App
```
--------------------------------
### Install Project Dependencies (Bash)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/extend-system-designer
Installs the necessary Node.js dependencies for System Designer using npm. This command should be run after cloning the repository.
```bash
npm i
```
--------------------------------
### System Start Method for Component Interaction
Source: https://designfirst.io/systemdesigner/documentation/docs/en/listen-to-a-model-event
This JavaScript code defines the 'start' method for a system. It retrieves a component with the ID 'luke' and sets its 'name' property to 'luke', demonstrating component initialization and property manipulation.
```javascript
function start() {
// get luke component
let luke = this.require('luke');
// set the name property of luke component
luke.name('luke');
}
```
--------------------------------
### HTML Component Source Example
Source: https://designfirst.io/systemdesigner/documentation/docs/en/bundle-your-html
This is an example of HTML content that can be used as the source for an HTML component within System Designer. When System Designer recognizes the 'source' property type as 'html', it validates the provided HTML structure.
```html
```
--------------------------------
### JSON Example for Model Generation
Source: https://designfirst.io/systemdesigner/documentation/docs/en/generate-a-model-from-a-json-file
This JSON structure serves as an example input for generating a model in the System Designer. It defines a menu with nested items and actions.
```json
{
"menu": {
"id": "file",
"value": "File",
"popup": {
"menuitem": [
{ "value": "New", "onclick": "CreateNewDoc()" },
{ "value": "Open", "onclick": "OpenDoc()" },
{ "value": "Close", "onclick": "CloseDoc()" }
]
}
}
}
```
--------------------------------
### Start System Designer in Development Mode (Bash)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/extend-system-designer
Starts the System Designer in development mode, enabling live reloading and debugging. Access the application at http://localhost:9001/.
```bash
npm run dev
```
--------------------------------
### Use exported JavaScript system in a server application
Source: https://designfirst.io/systemdesigner/documentation/docs/en/export-a-system
Runs an exported JavaScript system on a server using Node.js. It involves installing the 'system-runtime' package, requiring it, and then executing the system script. The provided example shows how to uncomment a line to use the 'require' function.
```bash
npm install system-runtime --save
```
```javascript
const runtime = require('system-runtime');
```
```bash
node mysystem.js
```
--------------------------------
### Create Jedi Component (System Designer)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/quick-start
This snippet demonstrates how to create a 'Jedi' component within System Designer by defining its properties like '_id', 'father', 'firstName', and 'lastName'. It shows the structure of a component's data, including setting default values and establishing relationships between components.
```JSON
{
"_id": "vader",
"father": "",
"firstName": "Darth",
"lastName": "Vader"
}
```
```JSON
{
"_id": "luke",
"father": "vader",
"firstName": "Luke",
"lastName": "Skywalker"
}
```
--------------------------------
### Schema Definition Example in System Designer
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-behavior
This snippet shows an example of a schema definition within System Designer, defining properties like _id, _name, and 'name'. This structure is used to define the model for components.
```json
{
"_id": "fff15dad-7b8d-4a16-8de8-0c8890f75550",
"_name": "Jedi",
"name": "property"
}
```
--------------------------------
### Create Book Component (JSON)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-graph-system
Defines a 'Book' component with properties for '_id', 'author', and 'title'. This is an example of creating a data component within System Designer.
```json
{
"_id": "GraphDatabase",
"author": "Jim Webber, Ian Robinson",
"title": "Graph Database"
}
```
--------------------------------
### Define Jedi Schema
Source: https://designfirst.io/systemdesigner/documentation/docs/en/quick-start
This JSON snippet defines the structure of a 'Jedi' schema. It specifies properties like '_id', '_name', 'firstName', 'lastName', 'father', and a 'fullName' method. Properties and links are defined using keywords like 'property' and 'link'.
```json
{
"_id": "1e378193da16eef",
"_name": "Jedi",
"_inherit": [
"_Component"
],
"firstName": "property",
"lastName": "property",
"father": "link",
"fullName": "method"
}
```
--------------------------------
### Initialize 'luke' Component in System Designer 'start' method
Source: https://designfirst.io/systemdesigner/documentation/docs/en/listen-to-a-data-store-event
This JavaScript code is part of the 'start' method in the System Designer. It retrieves a component named 'luke' from the system's runtime and sets its 'name' property to 'luke'. This function is essential for initializing components when the system begins execution.
```javascript
function start() {
// get luke component
const luke = this.require('luke');
// set the name property of luke component
luke.name('luke');
}
```
--------------------------------
### Create JS Component Source - JavaScript
Source: https://designfirst.io/systemdesigner/documentation/docs/en/bundle-your-javascript
This snippet represents the JavaScript code to be included in a JS component. When this component is rendered, the provided JavaScript code will be executed. In this example, it displays a simple 'Hello World' alert.
```javascript
alert('Hello World');
```
--------------------------------
### Create Person Component (JSON)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-graph-system
Defines a 'Person' component with properties for '_id', 'age', and 'name'. This example shows how to create instances of the Person node type.
```json
{
"_id": "john",
"age": 27,
"name": "John"
}
```
```json
{
"_id": "sally",
"age": 32,
"name": "Sally"
}
```
--------------------------------
### Component Using a Structure
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-type
This example demonstrates how a component can be defined using a structure. The 'location' property within the 'luke' component is populated with specific address details, adhering to the structure defined previously.
```json
{
"_id": "luke",
"location": {
"city": "Tatooine city",
"zip": 12345,
"country": "Tatooine"
}
}
```
--------------------------------
### Use exported JSON system in Node.js application
Source: https://designfirst.io/systemdesigner/documentation/docs/en/export-a-system
Installs and runs an exported JSON system in a Node.js environment. Requires the 'system-runtime' npm package. The 'install' method is called on the runtime object with the path to the JSON system file.
```bash
npm install system-runtime --save
```
```javascript
const runtime = require('system-runtime');
// install and start the system
untime.install('mysystem.json');
```
```bash
node mysystem.js
```
--------------------------------
### Render JS Component in System - JavaScript
Source: https://designfirst.io/systemdesigner/documentation/docs/en/bundle-your-javascript
Demonstrates how to require and render a 'JS' component within a system's 'start' method. It first imports the 'alertComponent' using 'this.require()' and then calls its 'render()' method to execute the component's behavior.
```javascript
function start() {
this.require('alertComponent').render();
}
```
--------------------------------
### Create Node.js 'hello world' server behavior
Source: https://designfirst.io/systemdesigner/documentation/docs/en/test-a-server-side-application
This Node.js code snippet defines a 'start' behavior for System Designer. It creates a simple HTTP server that listens on port 1234 and responds with 'hello world'. The 'logger' module is used to output a confirmation message. This code relies on Node.js's built-in 'http' module.
```javascript
function start() {
const http = require('http'),
logger = this.require('logger');
http.createServer(function (req, res) {
res.writeHead(200);
res.end('hello world\n');
}).listen(1234);
logger.info('server is running at http://127.0.0.1:1234');
}
```
--------------------------------
### Use exported JSON system in a web application
Source: https://designfirst.io/systemdesigner/documentation/docs/en/export-a-system
Integrates an exported JSON system into a web application using npm and System Runtime. The system is imported and then installed using the 'install' method of the runtime object. Logging level can be adjusted via the 'logger' module.
```bash
npm i system-runtime --save
```
```javascript
import runtime from 'system-runtime';
```
```javascript
import system from './mysystem';
```
```javascript
// set the level of log to see the logs
runtime.require('logger').level('info');
// install and run the system
runtime.install(system);
```
--------------------------------
### Implement fullName Behavior in JavaScript
Source: https://designfirst.io/systemdesigner/documentation/docs/en/quick-start
This JavaScript code defines the behavior for the 'fullName' method of a 'Jedi' model. It concatenates the 'firstName' and 'lastName' properties, separated by a space, and returns the resulting full name. This demonstrates how System Designer uses JavaScript for defining actions.
```javascript
function fullName() {
let result = this.firstName() + ' ' + this.lastName();
return result;
}
```
--------------------------------
### Render HTML Component in Application
Source: https://designfirst.io/systemdesigner/documentation/docs/en/bundle-your-html
This JavaScript function, typically part of an application's 'start' method, demonstrates how to integrate and render a require'd HTML component. It first loads the 'inputComponent' and then calls its render method, targeting the 'body' element.
```javascript
function start() {
this.require('inputComponent').render('body');
}
```
--------------------------------
### Interacting with Links in System Designer
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-behavior
Illustrates how to get the value of a link, require another component by its ID, and set a link to a specific component using JavaScript in System Designer. Links represent relationships between components.
```javascript
// get the value of the link
this.father();
// get a component
const vader = this.require('vader');
// set the link value with the component
this.father(vader);
```
--------------------------------
### Use exported JSON system in HTML file
Source: https://designfirst.io/systemdesigner/documentation/docs/en/export-a-system
Integrates an exported JSON system into an HTML file using a link tag and the System Runtime script. System Runtime automatically installs the system on page load. You can adjust the log level by setting the 'level' attribute on the script tag.
```html
App
```
```html
```
--------------------------------
### Edit Jedi Model
Source: https://designfirst.io/systemdesigner/documentation/docs/en/quick-start
This JSON snippet represents the detailed model for a 'Jedi'. It refines the schema by setting data types (string, Jedi), read-only status, and mandatory fields for properties. The 'father' link is specified to be of type 'Jedi', and the 'fullName' method's return type is defined as 'string'.
```json
{
"_id": "1a3a2150b31c099",
"_name": "Jedi",
"firstName": {
"type": "string",
"readOnly": false,
"mandatory": true,
"default": ""
},
"lastName": {
"type": "string",
"readOnly": false,
"mandatory": true,
"default": ""
},
"father": {
"type": "Jedi",
"readOnly": false,
"mandatory": false,
"default": ""
},
"fullName": {
"result": "string"
}
}
```
--------------------------------
### Define a Method in System Designer
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-schema
This example demonstrates defining a method for a schema in System Designer. By assigning the string value 'method' to a key, you declare an operation or function associated with the schema, like the 'fullName' method for a Jedi.
```json
{
"_id": "ee8b5c97-cb89-4cdf-82b3-d9d8bea23ac5",
"_name": "Jedi",
"fullName": "method"
}
```
--------------------------------
### Schema Definition with a Method in System Designer
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-behavior
An example schema definition that includes a 'method' type property named 'fullName'. Methods define executable functions within a component's model.
```json
{
"_id": "fff15dad-7b8d-4a16-8de8-0c8890f75550",
"_name": "Jedi",
"fullName": "method"
}
```
--------------------------------
### CSS Component Source - CSS
Source: https://designfirst.io/systemdesigner/documentation/docs/en/bundle-your-css
This CSS snippet defines basic styling for the body element, setting its background color to gray. It's an example of the source code that can be placed within a CSS component in System Designer.
```css
body {
background-color: gray;
}
```
--------------------------------
### Model Using a Type Alias
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-type
This example demonstrates how to use a previously defined type alias within a model. The 'Movie' model uses the 'title' alias for its 'title' property, which is fundamentally a string.
```json
{
"_id": "aae7856b-e531-479d-9ddc-ae7590e4ca94",
"_name": "Movie",
"_description": "",
"title": {
"description": "title of the movie",
"type": "title",
"readOnly": false,
"mandatory": false,
"default": ""
}
}
```
--------------------------------
### Accessing and Modifying Properties in System Designer
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-behavior
Demonstrates how to get and set the value of a property defined in the schema using JavaScript within System Designer. Properties are exposed as methods on the component instance.
```javascript
// get the value
this.name();
// set a value
this.name('luke');
```
--------------------------------
### Schema Definition with a Link in System Designer
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-behavior
An example schema definition that includes a 'link' type property named 'father'. This indicates a relationship to another component within the system.
```json
{
"_id": "fff15dad-7b8d-4a16-8de8-0c8890f75550",
"_name": "Jedi",
"father": "link"
}
```
--------------------------------
### Using Base Component Class APIs in System Designer
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-behavior
Explains how to use built-in Component class APIs within System Designer, such as getting the component's ID, destroying a component, and requiring other components by their ID. These APIs provide fundamental component management functionalities.
```javascript
// require a component
this.require('luke').name();
```
--------------------------------
### Define a Property in System Designer
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-schema
This example shows how to define a property for a schema in System Designer. By assigning the string value 'property' to a key, you declare a new attribute for the schema. This is a fundamental way to add data fields to your models.
```json
{
"_id": "ee8b5c97-cb89-4cdf-82b3-d9d8bea23ac5",
"_name": "Jedi",
"name": "property"
}
```
--------------------------------
### Define a Collection in System Designer
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-schema
This snippet shows how to define a collection within a schema in System Designer. Assigning the string value 'collection' to a key indicates a one-to-many relationship or a collection of typed objects, such as 'children' in this Jedi example.
```json
{
"_id": "ee8b5c97-cb89-4cdf-82b3-d9d8bea23ac5",
"_name": "Jedi",
"children": "collection"
}
```
--------------------------------
### Define a Link in System Designer
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-schema
This code illustrates how to define a link between schemas in System Designer, representing a one-to-one relationship. Assigning the string value 'link' to a key establishes a relationship to another model, like a 'father' link in this example.
```json
{
"_id": "ee8b5c97-cb89-4cdf-82b3-d9d8bea23ac5",
"_name": "Jedi",
"father": "link"
}
```
--------------------------------
### Implement Message Sending Behavior (JavaScript)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/send-messages-to-other-systems
Provides a JavaScript function to send a message to another channel using the fetch API. It configures the POST request with appropriate headers including the system ID and event name, and sends the message data in the request body. This is a core part of the inter-system communication setup.
```javascript
function send(message) {
// define here how to send the message to another channel (webRTC, XHR, ...)
// example
fetch('url_to_a_server', {
method: 'POST',
headers: new Headers({
'Content-Type': 'application/json',
'X-System-Id': message.from, // current system id (string value)
'X-System-Event': message.event // event name (string value)
}),
body: message.data // arguments send to the event (array value)
});
}
```
--------------------------------
### Use System Runtime in Node.js
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-npm-module
Demonstrates how to require the System Runtime module and install/start a system within a Node.js application.
```javascript
const runtime = require('system-runtime');
// install and start the system
runtime.install('mysystem');
```
--------------------------------
### Clone System Designer Repository (Bash)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/extend-system-designer
Clones the System Designer repository from GitHub to your local machine. This is the first step for updating the source code.
```bash
git clone https://github.com/design-first/system-designer.git
```
--------------------------------
### Enable Design Mode with Admin Extension
Source: https://designfirst.io/systemdesigner/documentation/docs/en/design-a-remote-client-system
This snippet shows how to enable design mode on a running system by adding the mode-admin extension to the HTML of the page containing the system. This allows System Designer to interact with the running application.
```html
```
--------------------------------
### Log Messages with Logger Component
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-behavior
This snippet demonstrates how to log debug, info, warn, and error messages using the logger component. It also shows how to set the overall log level.
```javascript
this.require('logger').info('this is an message');
// Example of setting log level
this.require('logger').level('warn');
this.require('logger').warn('This is a warning message.');
```
--------------------------------
### Build System Designer for Addons (Bash)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/extend-system-designer
Builds the System Designer project after adding new systems to the /addons directory. This command integrates the addons with the core system.
```bash
npm run build
```
--------------------------------
### Define Book Node Model (JSON)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-graph-system
Defines the detailed model for a 'Book' node, specifying types and properties for 'title' (string) and 'author' (string). This is used to structure data for Book nodes.
```json
{
"_id": "y12eff155c715742",
"_name": "Book",
"_description": "",
"title": {
"description": "",
"type": "string",
"readOnly": false,
"mandatory": false,
"default": ""
},
"author": {
"description": "",
"type": "string",
"readOnly": false,
"mandatory": false,
"default": ""
}
}
```
--------------------------------
### Logging Information in System Designer (JavaScript)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/run-your-system
Demonstrates how to log information at different levels (debug, info, warn, error) within your system's code using the 'logger' API in System Designer. These logs are crucial for debugging and understanding system behavior at runtime. The 'info', 'warn', and 'error' logs are displayed as messages, while 'debug' logs are filtered out by default.
```javascript
function start() {
this.require('logger').info('Hello World');
}
// Example log levels:
// this.require('logger').debug('this is a debug message');
// this.require('logger').info('this is an info message');
// this.require('logger').warn('this is a warning message');
// this.require('logger').error('this is an error message');
```
--------------------------------
### Define and Configure a Method in Schema
Source: https://designfirst.io/systemdesigner/documentation/docs/en/edit-a-model
This snippet illustrates defining a method in a schema and its generated model configuration. Methods represent actions within the system and include properties for description, parameters, and the return result type. Parameters can be defined with their own description, name, type, and mandatory/default settings.
```json
{
"_id": "c04bbcea-d1ec-43f0-be52-c7f1bf3120f5",
"_name": "Jedi",
"fullname": "method"
}
```
```json
{
"_id": "fbb6878d-c7af-4997-a717-0a42cbc6edb0",
"_name": "Jedi",
"_description": "",
"fullname": {
"description": "",
"params": [
{
"description": "",
"name": "param",
"type": "any",
"mandatory": false,
"default": null
}
],
"result": "any"
}
}
```
--------------------------------
### Create IS_FRIEND_WITH Component
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-graph-system
Defines the structure for an 'IS_FRIEND_WITH' relationship component. It includes unique identifiers, participants in the relationship, and a timestamp. This is a foundational step for establishing connections between entities in the system.
```json
{
"_id": "i1c36e1b6331b0f6",
"incoming": "john",
"outgoing": "sally",
"since": "2013-01-09T00:00:00.000Z"
}
```
--------------------------------
### Listen to Incoming Messages (JavaScript)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/send-messages-to-other-systems
Shows how to listen for messages sent from another system. It uses the 'runtime' component to process incoming messages, extracting event, sender ID, and data from request headers and body. This allows a system to react to events initiated by other systems.
```javascript
// we suppose that this system runs on a server and
// get the header and body of the request send by the other system
this.require('runtime').message({
'event': headers['x-system-event'], // 'somethingHappened' (string value)
'from': headers['x-system-id'], // system id of the system that send the message (string value)
'data': body // the arguments send by event (array value)
);
```
--------------------------------
### JavaScript API Navigation in System Designer
Source: https://designfirst.io/systemdesigner/documentation/docs/en/generate-a-model-from-a-json-file
This JavaScript code snippet shows how to use System Designer's APIs to access and retrieve data from a generated component. It demonstrates requiring a component by its ID and accessing nested properties using method chaining.
```javascript
function start() {
// get the component
// replace this 'id' with the one of the compoenent
// you have just created.
const component = this.require('f14a101ae4913ffd');
this.require('logger').info(component.menu().popup().menuitem(1).value());
}
```
--------------------------------
### Invoking Methods in System Designer
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-behavior
Shows how to call a method defined in the schema on a component instance using JavaScript within System Designer. Methods represent actions that can be performed by a component.
```javascript
// invoke the method
this.fullName();
```
--------------------------------
### Define IS_FRIEND_WITH Relationship Model (JSON)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-graph-system
Defines the detailed model for the 'IS_FRIEND_WITH' relationship, including a 'since' property (date) and specifying 'incoming' and 'outgoing' links as 'Person' types.
```json
{
"_id": "g19e531c5c819149",
"_name": "IS_FRIEND_WITH",
"_description": "",
"since": {
"description": "",
"type": "date",
"readOnly": false,
"mandatory": false,
"default": "1970-01-01T00:00:00.000Z"
},
"incoming": {
"description": "",
"type": "Person",
"readOnly": false,
"mandatory": false,
"default": ""
},
"outgoing": {
"description": "",
"type": "Person",
"readOnly": false,
"mandatory": false,
"default": ""
}
}
```
--------------------------------
### Create HAS_READ Component (2/2)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-graph-system
Defines another 'HAS_READ' relationship component, similar to the previous one but with different participant details and rating. This demonstrates creating multiple instances of the same relationship type with varying data.
```json
{
"_id": "k132a8124351e768",
"date": "2013-02-03T00:00:00.000Z",
"incoming": "john",
"outgoing": "GraphDatabase",
"rated": 5
}
```
--------------------------------
### Define Person Node Model (JSON)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-graph-system
Defines the detailed model for a 'Person' node, specifying types and properties for 'name' (string) and 'age' (number). This model structures the data for Person nodes.
```json
{
"_id": "m11c1515b7e12099",
"_name": "Person",
"_description": "",
"name": {
"description": "",
"type": "string",
"readOnly": false,
"mandatory": false,
"default": ""
},
"age": {
"description": "",
"type": "number",
"readOnly": false,
"mandatory": false,
"default": 0
}
}
```
--------------------------------
### Define Channel Model for Message Parameters
Source: https://designfirst.io/systemdesigner/documentation/docs/en/send-messages
This JSON code defines the model for the channel component, detailing the parameters for sending messages. It includes a 'send' method with a 'message' parameter and a 'somethingHappened' event with an optional string parameter.
```json
{
"_id": "135c71078810af2",
"_name": "_Channel",
"send": {
"params": [
{
"name": "message",
"type": "message"
}
]
},
"somethingHappened": {
"description": "",
"params": [
{
"description": "",
"name": "param",
"type": "string",
"mandatory": false,
"default": ""
}
]
}
}
```
--------------------------------
### Create Person Component with Code
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-component
This code snippet demonstrates how to create a 'Person' component using System Designer's scripting capabilities. It requires the 'Person' class and instantiates a new component named 'luke' with a 'name' property set to 'luke'. The 'name' property can then be accessed.
```javascript
// require the Person class
const Person = this.require('Person');
// create the component
const luke = new Person({
name: 'luke'
});
// then you can use your component
luke.name();
```
--------------------------------
### Define Book Node Schema (JSON)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-graph-system
Defines the schema for a 'Book' node, inheriting from 'Nodes'. It includes properties for 'title' and 'author'. This is a structural definition used within System Designer.
```json
{
"_id": "i1d8501332c1c6bd",
"_name": "Book",
"_inherit": [
"Nodes"
],
"title": "property",
"author": "property"
}
```
--------------------------------
### Initialize Component with ID in System Designer
Source: https://designfirst.io/systemdesigner/documentation/docs/en/listen-to-a-model-event
This JSON snippet shows how to initialize a component, specifically setting its '_id' to 'luke'. This is a precursor to referencing this component in system logic.
```json
{
"_id": "luke",
"name": ""
}
```
--------------------------------
### Define Message Model (_Channel)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/send-messages-to-other-systems
Defines the data model for the '_Channel' component, specifying parameters for the 'send' and 'somethingHappened' events. The 'send' event accepts a 'message' of type 'message', while 'somethingHappened' accepts a 'param' of type 'any'.
```json
{
"_id": "135c71078810af2",
"_name": "_Channel",
"send": {
"params": [
{
"name": "message",
"type": "message"
}
]
},
"somethingHappened": {
"params": [
{
"name": "param",
"type": "any",
"mandatory": false,
"default": ""
}
]
}
}
```
--------------------------------
### Define JS Model Render Method - JavaScript
Source: https://designfirst.io/systemdesigner/documentation/docs/en/bundle-your-javascript
Defines the 'render' method for a JavaScript model. This function dynamically creates a script tag, sets its innerHTML to the source code provided by 'this.source()', and appends it to the document's head. It assumes the 'source' property is of type 'javascript'.
```javascript
function render() {
var div = document.createElement('script');
div.innerHTML = this.source();
document.head.appendChild(div);
}
```
--------------------------------
### Database Operations with DB Component
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-behavior
This section covers various database operations using the db component. It includes counting all components, finding components with a query, inserting new components, updating existing ones, and removing components.
```javascript
// Get the number of created components
this.require('db').collections().Person.count();
// Find components with a query
this.require('db').collections().Person.find({
'firstName': 'Luke'
});
// Create a component
this.require('db').collections().Person.insert({
'_id': 'luke',
'firstName': 'Luke'
});
// Update a component
this.require('db').collections().Person.update({
'_id': 'luke'
}, {
'firstName': 'Luke'
});
// Delete a component
this.require('db').collections().Person.remove({
'_id': 'luke'
});
```
--------------------------------
### Define and Configure an Event in Schema
Source: https://designfirst.io/systemdesigner/documentation/docs/en/edit-a-model
This snippet demonstrates defining an event in a schema and its corresponding model configuration. Events signal occurrences within the system and can have associated parameters, each with its own description, name, type, and mandatory/default settings.
```json
{
"_id": "c04bbcea-d1ec-43f0-be52-c7f1bf3120f5",
"_name": "Jedi",
"changed": "event"
}
```
```json
{
"_id": "fbb6878d-c7af-4997-a717-0a42cbc6edb0",
"_name": "Jedi",
"_description": "",
"changed": {
"description": "",
"params": [
{
"description": "",
"name": "param",
"type": "any",
"mandatory": false,
"default": null
}
]
}
}
```
--------------------------------
### Query HAS_READ Components in JavaScript
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-graph-system
Demonstrates how to query the 'HAS_READ' collection to count entries where the 'outgoing' field matches 'GraphDatabase'. This JavaScript code snippet utilizes the system's require methods to access the database and logger.
```javascript
function start() {
this.require('logger').info(
this.require('db').collections().HAS_READ.find({
'outgoing': {
'$eq': 'GraphDatabase'
}
}).length
);
}
```
--------------------------------
### Define CSS Render Method - JavaScript
Source: https://designfirst.io/systemdesigner/documentation/docs/en/bundle-your-css
This JavaScript code defines the 'render' method for a CSS model. It creates a style element, sets its innerHTML to the provided source, and appends it to the document's head. This method is crucial for dynamically applying CSS to the application.
```javascript
function render() {
var div = document.createElement('style');
div.innerHTML = this.source();
document.head.appendChild(div);
}
```
--------------------------------
### Define HAS_READ Relationship Model (JSON)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-graph-system
Defines the detailed model for the 'HAS_READ' relationship, including properties for 'date' (date) and 'rated' (number). It also specifies 'incoming' (Person) and 'outgoing' (Book) links.
```json
{
"_id": "d11f871f899154fd",
"_name": "HAS_READ",
"_description": "",
"date": {
"description": "",
"type": "date",
"readOnly": false,
"mandatory": false,
"default": "1970-01-01T00:00:00.000Z"
},
"rated": {
"description": "",
"type": "number",
"readOnly": false,
"mandatory": false,
"default": 0
},
"incoming": {
"description": "",
"type": "Person",
"readOnly": false,
"mandatory": false,
"default": ""
},
"outgoing": {
"description": "",
"type": "Book",
"readOnly": false,
"mandatory": false,
"default": ""
}
}
```
--------------------------------
### Use exported JavaScript system in a client application
Source: https://designfirst.io/systemdesigner/documentation/docs/en/export-a-system
Embeds an exported JavaScript system into an HTML file. It requires including the System Runtime script and then the exported JavaScript system file using script tags. The system is automatically executed upon loading.
```html
```
```html
```
```html
App
```
--------------------------------
### Define Channel Schema for Sending Messages
Source: https://designfirst.io/systemdesigner/documentation/docs/en/send-messages
This JSON code defines the schema for a channel component, specifying events that can be sent. It inherits from a base component and defines 'send' and 'somethingHappened' events.
```json
{
"_id": "104ad1f48518376",
"_name": "_Channel",
"_inherit": [
"_Component"
],
"send": "event",
"somethingHappened": "event"
}
```
--------------------------------
### CSS Component Definition - JSON
Source: https://designfirst.io/systemdesigner/documentation/docs/en/bundle-your-css
This JSON object represents a CSS component named 'grayColor'. It includes the component's ID and its source property, which contains the CSS rules. This structure is used within System Designer to define and manage components.
```json
{
"_id": "grayColor",
"source": "body {\n background-color: gray;\n}"
}
```
--------------------------------
### Graphviz DOT File Export
Source: https://designfirst.io/systemdesigner/documentation/docs/en/export-a-system
Describes the export of a system design to a Graphviz DOT file. DOT files are a standard format for representing graphs and can be opened and edited by various diagramming tools. This is useful for visualizing system architecture.
```text
System will be packaged in a DOT file.
```
--------------------------------
### Define Person Node Schema (JSON)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-graph-system
Defines the schema for a 'Person' node, inheriting from 'Nodes'. It includes properties for 'name' and 'age'. This schema serves as a template for Person entities.
```json
{
"_id": "n1a88c10eff1beb6",
"_name": "Person",
"_inherit": [
"Nodes"
],
"name": "property",
"age": "property"
}
```
--------------------------------
### Implement Listener for Something Happened Event
Source: https://designfirst.io/systemdesigner/documentation/docs/en/send-messages
This JavaScript function is an event listener for the 'somethingHappened' event. It retrieves a logger component and logs the received message parameter.
```javascript
function somethingHappened(param) {
// get logger component
let logger = this.require('logger');
logger.info('the message "' + param + '" has been send.');
}
```
--------------------------------
### Triggering Events in System Designer
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-behavior
Demonstrates how to trigger an event defined in the schema on a component instance using JavaScript in System Designer. Events are used for communication and notification.
```javascript
// trigger an event
this.changed();
```
--------------------------------
### Define Person Schema in System Designer
Source: https://designfirst.io/systemdesigner/documentation/docs/en/listen-to-a-data-store-event
This code defines a schema named 'Person' for a component within the System Designer. It specifies that the component inherits from '_Component' and has a 'name' property. This schema serves as a blueprint for creating 'Person' components.
```json
{
"_id": "eb74b2c8-a1b7-4a08-aa6e-eaf029e2e3f2",
"_name": "Person",
"_inherit": [
"_Component"
],
"name": "property"
}
```
--------------------------------
### Define IS_FRIEND_WITH Relationship Schema (JSON)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-graph-system
Defines the schema for an 'IS_FRIEND_WITH' relationship, inheriting from 'Relationships'. It includes a 'since' property. This schema outlines the structure for friendship relationships.
```json
{
"_id": "z1747d12e621e92f",
"_name": "IS_FRIEND_WITH",
"_inherit": [
"Relationships"
],
"since": "property"
}
```
--------------------------------
### Create HAS_READ Component (1/2)
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-graph-system
Defines a 'HAS_READ' relationship component, logging a specific interaction. It includes a unique ID, date, participants, and a rating. This component tracks which entity has read content or interacted with another.
```json
{
"_id": "s146f0142a518868",
"date": "2013-09-02T00:00:00.000Z",
"incoming": "sally",
"outgoing": "GraphDatabase",
"rated": 4
}
```
--------------------------------
### Define HTML Render Method Behavior
Source: https://designfirst.io/systemdesigner/documentation/docs/en/bundle-your-html
This JavaScript function defines the behavior for rendering HTML content. It selects a DOM element based on an ID and sets its innerHTML to the provided source. It handles cases where the target is the document body or a specific element by its ID.
```javascript
function render(id) {
let dom = null;
if (id === 'body') {
dom = document.body;
} else {
dom = document.getElementById(id);
}
dom.innerHTML = this.source();
}
```
--------------------------------
### Generated Model Configuration for a Link in System Designer
Source: https://designfirst.io/systemdesigner/documentation/docs/en/edit-a-model
This JSON snippet displays the generated configuration for a link within a System Designer model, derived from a schema. It includes details like description, type, kind of relationship, readOnly, mandatory, and default value.
```json
{
"_id": "fbb6878d-c7af-4997-a717-0a42cbc6edb0",
"_name": "Jedi",
"_description": "",
"father": {
"description": "",
"type": "_Component",
"kind": "normal",
"readOnly": false,
"mandatory": false,
"default": ""
}
}
```
--------------------------------
### Define Model with Structure Type
Source: https://designfirst.io/systemdesigner/documentation/docs/en/create-a-type
This snippet shows how to define a property within a model using a structure type, ensuring a default value is set. It illustrates the structure of a 'Jedi' model with a 'location' property of 'address' type.
```json
{
"_id": "aae7856b-e531-479d-9ddc-ae7590e4ca93",
"_name": "Jedi",
"_description": "",
"location": {
"description": "",
"type": "address",
"readOnly": false,
"mandatory": false,
"default": {}
}
}
```