Develop Reference

Alpaca JS is not properly reordering array checkboxes

I have an Alpaca JS form comprised of an array of items which each consist of a textbox and a checkbox. For some reason, when I change the order using the dynamic controls, it successfully renumbers the textbox but doesn't change the number of the checkbox. This also results in a duplicate name assigned if the same top button to dynamically add new fields is pressed. The end result is incorrect data being passed when the form is submitted. How can I fix this to properly renumber the checkboxes?
Here's a sample of the Alpaca configuration:
$("#form1").alpaca({
"schema": {
"title": "Testing checkbox array IDs",
"description": "Testbox checkbox array test.",
"type": "object",
"properties": {
"form-fields": {
"title": "Fields",
"description": "These are the fields.",
"type": "array",
"items": {
"type": "object",
"properties": {
"field-name": {
"type": "string",
"title": "Field Name",
"description": "Enter the name for this field.",
"required": true
},
"field-box": {
"type": "boolean",
"title": "Field Box",
"description": "Check this box.",
"default": false
}
}
}
}
}
}
});

I couldn't find a way to correct the behavior itself but I was able to work around it by adding a postRender event to the Alpaca definition as follows:
"postRender": function(control) {
control.childrenByPropertyId["form-fields"].on("move", function() { $('input[type=checkbox]').each(function(index) { $(this).attr("name", $(this).closest("div:has(*[name])").first().attr("name")) }); });
control.childrenByPropertyId["form-fields"].on("add", function() { $('input[type=checkbox]').each(function(index) { $(this).attr("name", $(this).closest("div:has(*[name])").first().attr("name")) }); });
control.childrenByPropertyId["form-fields"].on("remove", function() { $('input[type=checkbox]').each(function(index) { $(this).attr("name", $(this).closest("div:has(*[name])").first().attr("name")) }); });
}
This is a bit of a hack but it works because the parent object does get assigned the correct name value and the form will post with those values if the name is just copied down into the input elements.

AngularJS: Dynamically apply has-error to input fields

I have html that is dynamically generated from JSON and I would like to implement some validation logic.
To clarify, here is an example:
<div ng-switch on="field.type" ng-hide="{{ field.hide }}">
<div ng-switch-when="input" class= "col-md-6" ng-class="{'has-error': reqField(field.name, entity[field.name]) }">
<input
ng-model="entity[field.name]" id="{{field.name}}" class="form-control"
type="text" ng-style="setStyle(field.style)" ng-change="{{field.change}}" />
</div>
</div>
{
"title": "Json Title",
"id": "j_id",
"groupfields": [
{
"name": "jsonname",
"title": "JSON Title",
"type": "jsonselect",
"namevalue": "jsonvalue",
"combo": "jsondropdown",
"change" : "jsonChanged()"
},
{
"name": "jsonEmail",
"title": "JSON Email Address",
"type": "display"
},
{
"name": "jsonPhone",
"title": "JSON Phone Number",
"type": "display"
}
]
}, {
"title": "Json Title",
"id": "j_id",
"groupfields": [
{
"name": "jsonname",
"title": "JSON Title",
"type": "jsonselect",
"namevalue": "jsonvalue",
"combo": "jsondropdown",
"change" : "jsonChanged()"
},
{
"name": "jsonEmail",
"title": "JSON Email Address",
"type": "display"
},
{
"name": "jsonPhone",
"title": "JSON Phone Number",
"type": "display"
}
]
},
if (entityName) {
return false;
} else {
return true;
}
So for clarification, ex: 'field.type' in the ng-switch on is the "type" in the JSON - and we can determine which html div to display the content based on different JSON keys/values.
This implies that one html div could potentially be used to generate hundreds of input fields so this needs to be dynamic.
I would like to add validation for when a required field is empty. At the moment, I've tried adding the ng-class="{has-error': } which points to my function reqField. However, because this function is getting fired for EVERY field with "type": jsonselect, this function is checking whether or not the field is empty - which is really inefficient in terms of speed and usability (super laggy).
The javascript you see above is more or less the logic that the function reqField() does in order to check whether or not the field is empty (very inefficient since we're checking hundreds).
What I would like to use is something along the lines of ng-required={{field.required}} and make a new key/value in the JSON to determine whether or not I want this field to be a required field (sort like this):
{
"title": "Json Title",
"id": "j_id",
"groupfields": [
{
"name": "jsonname",
"title": "JSON Title",
"type": "jsonselect",
"namevalue": "jsonvalue",
"combo": "jsondropdown",
"change" : "jsonChanged()"
},
{
"name": "jsonEmail",
"title": "JSON Email Address",
"type": "display",
"required": true
},
{
"name": "jsonPhone",
"title": "JSON Phone Number",
"type": "display",
"required": true
}
]
},
~ and somehow pass that information to the ng-class="{has-error': } so that we can highlight - or do whatever we want once we know the field has been filled in/or is empty.

Form validation is built in to AngularJS. The ng-required directive will add error state to the form object, so that you can set up your ng-class like so:
<div ng-switch-when="input" class= "col-md-6" ng-class="{'has-error': myForm[field.name].$error.required }">
Your form and input must have name attributes for this to work:
<form name="myForm">
...
<input name="{{field.name}}" ng-required="field.required">

Angular schematics conditional property/prompt

I'm working on creating my own schematics. This schematics will be responsible for creating a component (container) with some code. Template of this component will contain a few other components. One of this component will be banner component that will be optional. This banner will display text that will be translated into other languages, so I also should ask the user to provide (default) translation text if the banner will be included in the component.
Here is an example of this template:
name#dasherize.component.html.template:
<% if (includeBanner) { %>
<app-banner [title]="'<%= translationModuleKey %>.banner.title' | translate"
[description]="'<%= translationModuleKey %>.banner.description' | translate">
</app-banner>
<% } %>
<app-other-component>
</app-other-component>
Here is my schema.json:
{
"$schema": "http://json-schema.org/schema",
"id": "MySchematics",
"title": "My schematics",
"type": "object",
"properties": {
"name": {
"type": "string",
"description": "The name of the container",
"x-prompt": "Container name"
},
"includeBanner": {
"type": "boolean",
"description": "Include banner",
"default": "true",
"x-prompt": "Include banner"
},
"bannerTitle": {
"type": "string",
"description": "Banner title",
"x-prompt": "Banner title"
},
"bannerDescription": {
"type": "string",
"description": "Banner description",
"x-prompt": "Banner description"
},
"translationModuleKey": {
"type": "string",
"description": "Root key for translations"
}
},
"required": [
"name", "includeBanner", "bannerTitle", "bannerDescription"
]
}
My problem is that when user will set includeBanner to true, fields bannerTitle and bannerDescription should be required and there should be displayed prompt if those properties were not provided, but if includeBanner will be false, bannerTitle and bannerDescription shouldn't be required and there shouldn't be displayed prompt to fill these properties if those properties were not provided.
Any idea how to achieve that?

I was struggling with the same problem. What I've discovered - if you need conditional prompts, then you can't rely on declarative schema.json file (it doesn't support conditions).
Instead, you should use the askConfirmation function from #angular/cli/utilities/prompt.
So your example could look like this:
import { askConfirmation } from '#angular/cli/utilities/prompt';
export function yourSchematicsFn(options: Schema): Rule {
return async (tree: Tree, context: SchematicContext) => {
const includeBanner = await askConfirmation('Include Banner?', true);
if(includeBanner) {
// ask for bannerTitle and bannerDescription
}
else {
// do something else
}
return chain(/* chain your rules here */);
}
}
I've discovered this in Angular CLI ng-add schematics source code: askConfirmation.

Elasticsearch: can I avoid enabling fielddata on text fields?

I'm trying to get the latest records, grouped by the field groupId, which is a String like "group_a".
I followed the accepted answer of this question, but I've got the following error message:
Fielddata is disabled on text fields by default. Set fielddata=true on [your_field_name] in order to load fielddata in memory by uninverting the inverted index. Note that this can however use significant memory.
In the Elasticsearch docs is written:
Before you enable fielddata, consider why you are using a text field for aggregations, sorting, or in a script. It usually doesn’t make sense to do so.
I'm using a text field, because groupId is a String. Does it make sense to set fielddata: true if I want to group by it?
Or are there alternatives?
Using "field": "groupId.keyword" (suggested here) didn't work for me.
Thanks in advance!

The suggest answer with .keyword is the correct one.
{
"aggs": {
"group": {
"terms": {
"field": "groupId.raw"
},
"aggs": {
"group_docs": {
"top_hits": {
"size": 1,
"sort": [
{
"timestamp (or wathever you want to sort)": {
"order": "desc"
}
}
]
}
}
}
}
}
}
with a mapping like that:
"groupId": {
"type": "text",
"fields": {
"raw": {
"type": "keyword"
}
}
}

Parse dynamic nested JSON into HTML table

My experience with parsing JSON is fairly minimal but the document im working with is pretty big. JSON Objects are nested within one another and the keys are fairly consistent with "title","description","properties","default", and "type". Property/Object names will vary and new values may be added overtime so I want this to be as flexible as possible.
Here is a sample of the JSON I am working with, The real document is much larger:
{
"title": "settings schema",
"description": "Settings schema ",
"type": "object",
"properties": {
"alerts": {
"description": "Settings for alerts ",
"type": "object",
"properties": {
"pageSize": {
"description": "The number of alerts .",
"type": "number",
"default": 15
},
"paramKeys": {
"description": "parameter keys",
"type": "string",
"default": "fromKey,toKey,inKey,outKey"
},
"alertsEnabled": {
"description": "Enable/disable alerts",
"type": "boolean",
"default": true
},
"actionablesEnabled": {
"description": "Enable/disable actionable alerts",
"type": "boolean",
"default": true
},
"HistoryEnabled": {
"description": "Enable/disable alert history",
"type": "boolean",
"default": true
},
"generalAlertsEnabled": {
"description": "Enable/disable general alerts",
"type": "boolean",
"default": true
},
"accountsEnabled": {
"description": "Enable/disable account alerts",
"type": "boolean",
"default": true
},
"alertPrefsEnabled": {
"description": "Enable/disable alert preferences",
"type": "boolean",
"default": true
},
"datePicker": {
"description": "Search date picker settings",
"type": "object",
"properties": {
"maxSearchDays": {
"description": "The maximum days to search before today's date. Used on search page",
"type": "integer",
"default": 365
},
"minDays": {
"description": "The number of days before a user is able to select a date. Should be less than the maxDays",
"type": "integer",
"default": 0
},
"maxDays": {
"description": "The total number of days that user is able to select a date until. Should be greater than minDays",
"type": "integer",
"default": 30
},
"blackOutDays": {
"description": "Days of the week indicated by 0 (Sunday) though 6 (Saturday) that will be blacked out",
"type": "array",
"default": []
},
"blackOutDates": {
"description": "Date Ranges or individual dates in the following format: ['20 Mar 2014 - 1 May 2014', '28 Apr 2014'] that are blacked out or unselectable on the calendar. Typically holidays. ",
"type": "array",
"default": []
},
"isAlertCalendar": {
"description": "Configures datepicker to work for alerts dnd ",
"type": "boolean",
"default": true
}
},
"required": [
"maxSearchDays",
"minDays",
"maxDays",
"blackOutDays",
"blackOutDates",
"isAlertCalendar"
]
}
},
"required": [
"pageSize",
"paramKeys"
]
}
}
Ive seen a lot of places online say to iterate over arrays but it seems like im dealing with more nested Objects than arrays. Value/Property names may change so I cant really hardcode any property names. I am trying to pull this data and parse it back into an HTML table ideally leaving empty cells where data doesn't apply. For example the first column would have the "alerts" title and every cell underneath it would be empty until all of its properties had been parsed into the next column with property description/type/sub properties/ and defaults in the following columns again leaving blank values when there is no data to include.
Here is a hardcoded example of what I am trying to achieve
Ive never had to work with such complex dynamic json data before so usually its as easy as chaining together keys to get to values but this i really throwing me through a loop and the output i am producing looks like 200 empty cells with the word "id" repeated 10 times in the middle of it.
Any advice helps!

You need to know how deep your structure is in order to render x amount
of sub property columns ( where x is the number of levels )
When parsing an object you need to know the level where that object is so that you may add columns to that row corresponding to that object.
use recursion. Since you know what type you're dealing with you only have to recurse down the properties with the type object.
I honestly tried solving your problem but I keep bumping to the problem that this table is going to look horrific after 3+ levels. I would perhaps rethink how you want the data to be displayed.
If this is some sort of exercise ( i.e. you have to use a table ) I would look into a js template rendering engine that would help you render the x columns. i.e. something like underscore would let you do:
<tr>
<% for(var i = 0; i < totalNumberOfLevels; i --) { %>
<td></td>
<% }; %>
<td><%- default %></td>
</tr>

Maybe this helps you out?
Convert JSON array to an HTML table in jQuery
(at the download page is also a module listed which supports sub grid creation)
http://www.trirand.com/blog/?page_id=6