So I have a dynamic form builder for entering information. My issue at the moment is that I would like add required to an input element based of a key or attribute I can add in the JSON that the form is built by.
Has anyone done this before, as I can't think of a good workaround to do so.
Here is the JSON and the form builder directive.
Form builder JSON
{
"book": {
"config":{
"citations": true,
"order": ["title", "author", "publisher", "issued", "publisher-place", "edition"]
},
"fields": {
"title": {
"label": "Title",
"placeholder": "Enter Title",
"type": "string"
},
"author": {
"label": "Author",
"placeholder": "Enter Author",
"type": "string"
},
"publisher": {
"label": "Publisher",
"placeholder": "Enter Publisher",
"type": "string"
},
"issued": {
"label": "Year of Publication (YYYY-MM-DD)",
"placeholder": "Enter year of publication (YYYY-MM-DD)",
"type": "string"
},
"publisher-place": {
"label": "Place of Publication",
"placeholder": "Enter Place of Publication",
"type": "string"
},
"edition": {
"label": "Edition",
"placeholder": "Enter edition",
"type": "string"
}
}
},
"chapter": {},
"article": {},
"website": {}
}
Form Builder Directive
angular.module('ReferenceME.directives.formBuilder', [
'templates',
'ngResource'
])
.directive('formBuilder', ['$resource', '$http', function ($resource, $http) {
var sortFormData = function (data) {
console.log(data);
for (var item in data) {
for (var field in data[item].fields) {
data[item].fields[field].model = field;
}
}
return data;
};
return {
templateUrl: 'formBuilder/formBuilder.html',
link: function (scope, element, attrs) {
$http.get('assets/templates/forms.json').then(function (response) {
scope.formFields = sortFormData(response.data);
scope.referenceForm.fields = {type:scope.manualEntryType};
});
}
}
}]);
Form builder template
<form ng-submit="createReference(referenceForm)" class="manual-entry__form animate__labels-left" name="referenceForm" novalidate>
<p class="manual-entry__field" ng-repeat="field in formFields[manualEntryType].fields">
<input type="text" ng-model="referenceForm.fields[field.model]" placeholder="{{field.placeholder}}" />
<label>{{field.label}}</label>
</p>
<input class="submit__button" type="submit" value="ReferenceME">
</form>
Wouldn't it be an option to use the ng-required attribute in this case? As referenced here.
<input class="submit__button" type="submit" value="ReferenceME" ng-required="{{field.required}}">
Related
I'm using a JSON configuration schema which gets pushed to a website which should by using this JSON editor. And I would like to have the user input shown in the description field. Here is a snippet of the JSON file:
{
"type": "object",
"required": [
"file_name"
],
"properties": {
"file_name": {
"type": "string",
"title": "<h3>Table name</h3>",
"description": "Only alphanumeric characters dash and underscores are allowed.</br>Your data will be loaded to some_path.{your table name}",
"options": {
"inputAttributes": {
"placeholder": "your table name"
}
},
"propertyOrder": 100
}
}
}
I would like to have the "Table name" inputted by the user in the "description" field instead of {your table name}. According to the documentation you can use the "watch" variable:
{
"type": "object",
"properties": {
"first_name": {
"type": "string"
},
"last_name": {
"type": "string"
},
"full_name": {
"type": "string",
"template": "{{fname}} {{lname}}",
"watch": {
"fname": "first_name",
"lname": "last_name"
}
}
}
}
But this doesn't work in the "description" field. Any ideas how I can deal with this?
I assume I've missed something in defining the schema. Note that the id property is required under the form property, but it is not provided in the JSON, yet the JSON validates correctly according to multiple JSON validators online.
Schema
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://example.biz",
"type": "object",
"properties": {
"form": {
"type": "object",
"nullable": false,
"properties": {
"id": {
"type": "number",
"description": "The unique identifier of the form.",
"nullable": false
},
"name": {
"type": "string",
"description": "The name of the form.",
"nullable": false
}
}
}
}
}
JSON Payload
{
"form": {
"name": "Test 2"
}
}
Your schema doesn't specify which properties are required. You need to set required to the fields you want to be there. You may also wish to set additionalProperties to false.
Docs: https://json-schema.org/understanding-json-schema/reference/object.html#required-properties
I don't see nullable as a key anywhere in the json schema docs.
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://example.biz",
"type": "object",
"properties": {
"form": {
"type": "object",
"properties": {
"id": {
"type": "number",
"description": "The unique identifier of the form."
},
"name": {
"type": "string",
"description": "The name of the form."
}
},
"required": ["id", "name"],
"additionalProperties": false
}
}
}
I am looking a way to open a particulate addcase on addcase page from Event Action , i was trying with "icm.OpenPage"
try{
solution.retrieveCaseType("Demo_ApprovalCase", function(caseType) {
solution.createNewCaseEditable(caseType, function(pendingCaseEditable) {
modified_payload = {
caseEditable: pendingCaseEditable,
caseType: caseType,
coordination: new icm.util.Coordination(),
eventName: "icm.SendNewCaseInfo",
eventType: "broadcast"
};
var subject = new dojox.uuid.Uuid(dojox.uuid.generateRandomUuid());
var targetosname = solution.targetObjectStore.objectStoreName;
self.onBroadcastEvent(icm.OpenPage, {
pageClassName: "CMTOS/Demo/CRDemo",
pageType: "caseNewPage",
subject: subject,
pageTitle: "Add Case Custom",
pageContext: {
solution: self.solution,
role: self.role
},
crossPageEventName: "icm.SendNewCaseInfo",
crossPageEventPayload: modified_payload
});
});
});
}catch (Error) {
console.log(Error);
}
I got a error saying "eventName is undefined".
I have try with "icm.OpenAddCasePage" event to get this result by with the example i found
{"ICM_ACTION_COMPATIBLE": true,
"context": null,
"name": "Custom Add Case Action",
"description": "An action to add cases from other solution",
"properties": [
{
"id": "label",
"title": "Add a custom Case",
"defaultValue": "Custom Add Case",
"type": "string",
"isLocalized":false
},
{
"id": "solution",
"title": "Solution",
"type": "string",
"isLocalized":false
},
{
"id": "caseType",
"title": "Case Type",
"defaultValue": "",
"type": "string",
"isLocalized":false
}
],
"events":[
{
"id":"icm.OpenAddCasePage",
"title":"Open Add custom Case Page",
"direction":"published",
"type":"broadcast",
"description":"Open Add Custom Case Page"
}
]
};
But i didn't get any output.I am looking a way to do BroadcastEvent or call function so i can open a particulate addcase.
I am completely new to Angular Schema forms and am trying to create some forms with it to display on my html pages. I would like to know how and where to place the form content and the schema content as defined in this page. In what kind of files do I place these lines of code and how can I call the form to be displayed in my html pages?
Form
[
"name",
"email",
{
"key": "comment",
"type": "textarea",
"placeholder": "Make a comment"
},
{
"type": "submit",
"style": "btn-info",
"title": "OK"
}
]
Schema
{
"type": "object",
"title": "Comment",
"properties": {
"name": {
"title": "Name",
"type": "string"
},
"email": {
"title": "Email",
"type": "string",
"pattern": "^\\S+#\\S+$",
"description": "Email will be used for evil."
},
"comment": {
"title": "Comment",
"type": "string",
"maxLength": 20,
"validationMessage": "Don't be greedy!"
}
},
"required": [
"name",
"email",
"comment"
]
}
Help in this regard with some detailed beginner level support guidelines will be much appreciated.
One way is to provide the schema and the instance data in a controller of your choice.
The documentation wiki provides a basic example where you should get all the necessary information.
Controller:
angular.module('myModule', ['schemaForm'])
.controller('FormController', function($scope) {
$scope.schema = {
type: "object",
properties: {
name: { type: "string", minLength: 2, title: "Name", description: "Name or alias" },
title: {
type: "string",
enum: ['dr','jr','sir','mrs','mr','NaN','dj']
}
}
};
$scope.form = [
"*",
{
type: "submit",
title: "Save"
}
];
$scope.model = {};
}
Template:
<div ng-controller="FormController">
<form sf-schema="schema" sf-form="form" sf-model="model"></form>
</div>
I'm using the loopback framework to create a RESTful API for my application.
Following the documentation, I create my own Customer Model extending the built-in model User.
What I'm trying to achieve is:
How can I rename and remove some properties from this built-in model?
{
"name": "Cliente",
"plural": "Clientes",
"base": "User",
"idInjection": false,
"strict":"true",
...
}
{
"name": "User",
"properties": {
"realm": {
"type": "string"
},
"username": {
"type": "string"
},
"password": {
"type": "string",
"required": true
},
"email": {
"type": "string",
"required": true
},
"emailVerified": "boolean",
"verificationToken": "string"
},
...
}
I reached the results modyfing the loopbacks models inside the node modules, but this solution does not seem the right way, is there a way to config this in my code instead change loopback base models?
I think what you are trying to do is "rename" a property, am I correct?
If so, you can do the following:
"senha": {
"type": "string",
"id": true,
"required": true,
"index": true,
"postgresql": {
"columnName": "password"
}
}
Notice that I have a "postgresql" attribute, which depends on your database connector. Check it here. Inside that attribute I have a "columnName", which is the real name of that column in my database. So "senha" is the new name of that attribute.
For hiding the username property, you could do the following in the root object:
"hidden":["username"]
Your final file should look something like this:
{
"name": "Cliente",
"plural": "Clientes",
"base": "User",
"idInjection": false,
"strict": "true",
"properties": {
"realm": {
"type": "string"
},
"username": {
"type": "string"
},
"senha": {
"type": "string",
"required": true,
"postgresql": {
"columnName": "password"
}
},
"email": {
"type": "string",
"required": true
},
"emailVerified": "boolean",
"verificationToken": "string"
},
"hidden": ["username"]
}