{"id":40148120,"url":"https://github.com/eclipse-esmf/esmf-sdk-js-schematics","last_synced_at":"2026-01-26T13:09:59.754Z","repository":{"id":144585210,"uuid":"473342028","full_name":"eclipse-esmf/esmf-sdk-js-schematics","owner":"eclipse-esmf","description":"Create UI components for Angular applications with Schematics based on Aspect Models.","archived":false,"fork":false,"pushed_at":"2026-01-09T19:29:54.000Z","size":3978,"stargazers_count":4,"open_issues_count":10,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2026-01-19T19:36:41.159Z","etag":null,"topics":["angular","aspect-models","digital-twins","javascript","js"],"latest_commit_sha":null,"homepage":"https://eclipse-esmf.github.io/js-sdk-guide/index.html","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eclipse-esmf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS.md","dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-03-23T20:07:16.000Z","updated_at":"2025-07-24T14:36:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"d6f73cdf-fcfc-486d-b6c1-2dda504087e0","html_url":"https://github.com/eclipse-esmf/esmf-sdk-js-schematics","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/eclipse-esmf/esmf-sdk-js-schematics","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipse-esmf%2Fesmf-sdk-js-schematics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipse-esmf%2Fesmf-sdk-js-schematics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipse-esmf%2Fesmf-sdk-js-schematics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipse-esmf%2Fesmf-sdk-js-schematics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eclipse-esmf","download_url":"https://codeload.github.com/eclipse-esmf/esmf-sdk-js-schematics/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipse-esmf%2Fesmf-sdk-js-schematics/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28778931,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-26T11:46:04.308Z","status":"ssl_error","status_checked_at":"2026-01-26T11:46:02.664Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","aspect-models","digital-twins","javascript","js"],"created_at":"2026-01-19T15:02:43.761Z","updated_at":"2026-01-26T13:09:59.741Z","avatar_url":"https://github.com/eclipse-esmf.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ESMF SKD JS :: Angular Schematics 👷\n\n## Table of Contents\n\n- [Introduction](#introduction)\n- [Getting help](#getting-help)\n- [Features](#features)\n- [Getting started](#getting-started)\n    - [Prerequisites](#prerequisites)\n    - [Using the schematic commands in external projects for testing purpose](#using-the-schematic-commands-in-external-projects-for-testing-purpose)\n- [Overview of the schematics commands](#overview-of-the-schematics-commands)\n    - [The _types_ schematics](#the-types-schematics)\n        - [Usage](#usage)\n        - [Example type definition file](#example-type-definition-file)\n    - [The _table_ schematics](#the-table-schematics)\n        - [Features provided by the schematics table](#features-provided-by-the-schematics-table)\n        - [Howto generate a table component with the schematics command](#howto-generate-a-table-component-with-the-schematics-command)\n    - [The _card_ schematics](#the-card-schematics)\n        - [Features provided by the schematics card](#features-provided-by-the-schematics-card)\n        - [Howto generate a card component with the schematics command](#howto-generate-a-card-component-with-the-schematics-command)\n    - [The _form_ schematics](#the-form-schematics)\n        - [Features provided by the schematics form](#features-provided-by-the-schematics-form)\n        - [Howto generate a form component with the schematics command](#howto-generate-a-form-component-with-the-schematics-command)\n- [Local Development](#local-development)\n- [Documentation](#documentation)\n- [License](#license)\n\n## Introduction\n\nThis repository contains a bundle of Angular schematics that may be used to\ncreate [Angular components](https://angular.io/guide/component-overview) and generate code based\non [RDF aspect module object](https://www.w3.org/TR/turtle/).\n\n## Getting help\n\nAre you having trouble with SDK JS? We want to help!\n\n- Check the [developer documentation](https://eclipse-esmf.github.io)\n- Having issues with the ESMF SDK JS schematics? Open\n  a [GitHub issue](https://github.com/eclipse-esmf/esmf-sdk-js-schematics/issues).\n\n## Features\n\nThe schematics' collection for this package includes dynamic generation of:\n\n- internationalization, using [i18n](https://angular.io/guide/i18n).\n- custom table components based on any aspect model loaded.\n- proper types of properties and entities used.\n- default configurations can be set in config file even if they are not asked in the prompter\n\n## SDK schematics uses ESMF Aspect Model Loader library\n\n- This library is also an open source project and can be found\n  at: https://github.com/eclipse-esmf/esmf-sdk-js-aspect-model-loader (no action required, this library is already\n  included in SDK schematics)\n\n## SDK schematics generates components based on ttl files\n\nTTl files can be generated using the open source project: Aspect Model Editor (https://github.com/eclipse-esmf/esmf-sdk)\nAspect Model Editor project uses ESMF Samm Aspect Meta\nmodel (https://github.com/eclipse-esmf/esmf-semantic-aspect-meta-model)\n\n## Getting started\n\n### Prerequisites\n\nIn order to generate code based on the available schematics, the following steps must be taken:\n\n1. Install [node](https://nodejs.org/en/) (LTS version).\n\n2. Schematics are part of the Angular ecosystem so angular-cli must be installed by running this command in a terminal:\n   Run `npm install -g @angular/cli@19`\n\n3. To create an Angular application without generating a new project structure that lacks app.module.ts and other\n   essential files, use the --no-standalone flag.\n   This approach ensures the creation of a fully structured Angular project. Execute the following command in your\n   terminal:\n   Run `ng new \u003cyour-project-name\u003e --no-standalone`\n\n```bash\n\nFor more info on schematics, use the following command:\n\n```bash\nng generate @esmf/semantic-ui-schematics:\u003cschematics-name\u003e --help\n```\n\n## Using the schematic commands in external projects for testing purpose\n\nThe `semantics-ui-schematics` is a plain typescript project that is used to execute schematics, based on user decision.\n\n1. create a new folder, preferably outside of `semantic-ui-schematics` folder\n2. create a new project using (custom project name may be used):\n\n```bash\nng new demo-schematic\n\ncd demo-schematic\n```\n\n3. run (if not already installed):\n\n```bash\nnpm install -g @angular-devkit/schematics-cli@19\n```\n\n4. Optionally add some .ttl files in the same folder in order to use in the schema generation process. The schematic\n   generator will ask for a path to one or more .ttl files\n\n5. Install and run the command to generate the component, table in this case (do not use Git Bash, preferably use idea\n   terminal, (Windows) command promt or other (Linux/Mac) terminal)\n\n**_NOTE:_** Please enter the desired version under {Version}.\n\n```bash\nnpm install --save-dev https://github.com/eclipse-esmf/esmf-sdk-js-schematics/releases/download/v{Version}/esmf-semantic-ui-schematics-{Version}.tgz\nng generate @esmf/semantic-ui-schematics:table\n```\n\nor if you have sdk schematics project installed locally run:\n\n```bash\nng generate ..\\\u003cfolder of the scheamtics project\u003e\\src\\collection.json:table --dry-run=false\n```\n\nthen pass the .ttl file/s paths from step `4` when prompted.\n\n\u003e A new component should be generated under : `app/shared/components/\u003ccomponent-name\u003e` with resolved\n\u003e dependencies.\n\nFor a list of available schematics and details use:\n\n```bash\nschematics @esmf/semantic-ui-schematics:\u003cschematics-name\u003e --help\n```\n\nwhere `\u003cschematics-name\u003e` can be replaced by:\n\n- table\n- card\n- form\n- i18n\n- types\n\n6. add translations\n\n```bash\nng generate @esmf/semantic-ui-schematics:i18n\n```\n\nor if you have sdk schematics project installed locally run:\n\n```bash\nng generate ..\\\u003cfolder of the scheamtics project\u003e\\src\\collection.json:i18n --dry-run=false\n```\n\n\u003e A new command should be added in package.json inside scripts section:\n\u003e \"combine-i18n\"\n\nRun combine-i18n command:\n\n```bash\nnpm run combine-i18n\n```\n\nAnd in assets folder an i18n folder should be generated. And i18n folder should contain the translations json files:\nen.movement-table.translation.json, en.json.\n\n7. add environment files\n\n```bash\nng generate environments\n```\n\n## Overview of the schematics commands\n\n### The _types_ schematics\n\nThis angular schematic can be used to generate TypeScript type definitions\nfrom a concrete aspect model.\nThese TypeScript type definitions assist developers in writing type-safe code\nwhen writing Angular web applications dealing with aspect models.\n\nAlthough this part is included in the table generation, it can also be used stand alone.\n\n#### Usage\n\n```bash\nng generate @esmf/semantic-ui-schematics:types\n```\n\nThis command will interactively ask for a comma separated list of aspect model\nfiles in Turtle (Terse RDF Triple Language) format.\n\nThe TypeScript type definition files will be created in folder _app/shared/types_.\n\n\u003e **_NOTE:_** The types schematics is automatically run inside the table generation process. This can be also run\n\u003e manually.\n\n---\n\n#### Example type definition file\n\nAspect model: _movement.ttl_\n\nFile _app/shared/types/movement.types.ts_\n\n```typescript\nexport interface Movement {\n    isMoving: boolean;\n    speed: number;\n    speedLimitWarning: TrafficLight;\n    position: SpatialPosition;\n}\n\nexport enum TrafficLight {\n    Green = 'green',\n    Yellow = 'yellow',\n    Red = 'red',\n}\n\nexport interface SpatialPosition {\n    latitude: number;\n    longitude: number;\n    altitude?: number;\n}\n```\n\n---\n\n## The _table_ schematics\n\nhttps://eclipse-esmf.github.io/ame-guide/modeling/operation.html\nModeling Events\nThe table schematics can be used for table generation. This is achieved by using the table provided in\nthe [angular material package](https://v19.material.angular.io/components/table/overview).\n\n**_NOTE:_** The JavaScript SDK does not automatically generate code for Operations and Events. If you need UI code that\nrepresents the Operations available for an aspect, or the Events that an aspect can trigger, you'll need to implement\nthis manually. We welcome contributions and requests for enhancements. Please submit them at our GitHub issues\npage: [GitHub issues](https://github.com/eclipse-esmf/esmf-sdk-js-schematics/issues). For additional guidance on\nmodeling Operations and Events, visit our documentation pages\non [Modeling Operations](https://eclipse-esmf.github.io/ame-guide/modeling/operation.html)\nand [Modeling Events](https://eclipse-esmf.github.io/ame-guide/modeling/event.html).\n\n### Features provided by the schematics table\n\n1. Types generation\n2. Aspect model multiple version support\n3. Command bar\n    1. Search filter for string properties\n    2. Dropdown filter for enum properties\n    3. Date-time filter for date-time properties\n    4. Export functionality\n    5. Refresh data functionality\n    6. Custom actions\n    7. Order of filter\n4. Single or multiple selection with checkboxes\n5. Event emitters exposed for click, double click, right click treated as context menu events\n6. Table generation for the entire aspect or just a property of user's choice\n7. Multiple aspect models selection\n8. Column ordering\n9. Default sorting column selection\n10. Removing properties from tables header\n11. Select if translations should be generated for removed properties.\n12. Column pop-up selection for showing/hiding the columns header after table generation\n13. Wizard output to regenerate the same table without going through the wizard again\n14. JSON access path\n15. Custom actions for a row in the table\n16. Pagination\n17. Client or remote data handling\n18. Possibility to add a custom service which can or cannot be overridden when generating the same component again\n\n### Howto generate a table component with the schematics command\n\n[Link to readme](_legacy/src/ng-generate/components/table/README.md)\n\n---\n\n## The _card_ schematics\n\nThe card schematics can be used for card generation. This is achieved by using the card provided in\nthe [angular material package](https://v19.material.angular.io/components/card/overview).\n\n### Features provided by the schematics card\n\n1. Types generation\n2. Aspect model multiple version support\n3. Command bar\n    1. Search filter for string properties\n    2. Dropdown filter for enum properties\n    3. Date-time filter for date-time properties\n    4. Export functionality\n    5. Refresh data functionality\n    6. Custom actions\n    7. Order of filter\n4. Event emitters exposed for click, double click, right click treated as context menu events\n5. Card generation for the entire aspect or just a property of user's choice\n6. Multiple aspect models selection\n7. Default card sorting actions\n8. Select if translations should be generated for removed properties.\n9. Wizard output to regenerate the same card without going through the wizard again\n10. JSON access path\n11. Custom actions for a card\n12. Pagination\n13. Client or remote data handling\n14. Custom card content to create your own preferences\n15. Possibility to add a custom service which can or cannot be overridden when generating the same component again\n\n### Howto generate a card component with the schematics command\n\n[Link to readme](_legacy/src/ng-generate/components/card/README.md)\n\n---\n\n## The _form_ schematics\n\nThe form schematics can be used for form generation.\n\n### Features provided by the schematics form\n\n1. Types generation\n2. Aspect model multiple version support\n3. Form generation for the entire aspect or just an entity of user's choice\n4. Multiple aspect models selection\n5. Wizard output to regenerate the same form without going through the wizard again\n6. Possibility to set the form as read only\n7. Validation rules for form fields and groups (partial support)\n\n### How to generate a form component with the schematics command\n\n[Link to readme](_legacy/src/ng-generate/components/form/README.md)\n\n---\n\n## Local Development\n- Install dependencies:\n  ```bash \n  npm ci\n  ```\n2 processes should be run in parallel to develop the schematic locally:\n- Start the project in watch mode:\n  - Build generator compilation in watch mode:\n    ```bash\n    tsc -p libs/schematic/tsconfig.generators.json --watch\n    ```\n  - Build the schematic library in watch mode:\n    ```bash\n    nx build schematic --watch\n    ```\n- In another terminal, run the schematic generation in the demo project:\n  ```bash\n  npx nx g @esmf/semantic-ui-schematic:table --dry-run=false --skip-install --name=table --project=demo \n  ```\n  \n## Documentation\n\nFurther documentation and howto's are provided in the\nofficial [JS SDK User Documentation](https://eclipse-esmf.github.io/js-sdk-guide/index.html)\n\n## License\n\nSPDX-License-Identifier: MPL-2.0\n\nThis program and the accompanying materials are made available under the terms of the\n[Mozilla Public License, v. 2.0](LICENSE).\n\nThe [Notice file](NOTICE.md) details contained third party materials.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feclipse-esmf%2Fesmf-sdk-js-schematics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feclipse-esmf%2Fesmf-sdk-js-schematics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feclipse-esmf%2Fesmf-sdk-js-schematics/lists"}