Related
I am working in ServiceNow and am trying to extend an ootb directive, then make some modifications to a couple functions. So far I've figured out how to extend the directive:
function (spModelDirective){
return angular.extend({}, spModelDirective[0], {
templateUrl:'lbl_custom_template.xml'
});
}
Within this directive, there's a function called getNestedFields that I would like to make edits to:
function getNestedFields(fields, containers) {
if (!containers)
return;
for (var _container in containers) {
var container = containers[_container];
if (container.columns) {
for (var _col in container.columns) {
var col = container.columns[_col];
for (var _field in col.fields) {
var field = col.fields[_field];
if (field.type == "container" && container.caption != "")
getNestedFields(fields, [field]);
else if (field.type == "checkbox_container")
getNestedFields(fields, field.containers);
else if (field.type == "field" || container.caption=="")
fields.push(formModel._fields[field.name]);
}
}
}
}
}
Can someone provide some guidance on what the correct syntax for this would be?
More information
Our team cloned the ootb widget-form and am trying to create a custom layout. Basically, we want each form section to be it's own tab much like the back-end form instead of one long form, which is what the ootb widget-form currently does. In the very first line of the sp-variable-layout template, it shows:
<fieldset ng-init="$last ? execItemScripts() : null" ng-show="isContainerVisible(container)" ng-repeat="container in containers">
The ng-repeat of container in containers considers each form section as a separate container (which is perfect), BUT it also considers any splits as a separate container as well. So for example, if my form's layout looks like this:
This will create two tabs: one that has every field within the begin and end splits AND a separate tab with everything after the end split. The JSON object that is created looks like this:
{
"_bootstrap_cells": 6,
"_count": 2,
"visible": true,
"columns": [{
"fields": [{
"name": "type_of_account",
"type": "field"
}, {
"name": "routing_transit_number",
"type": "field"
}]
}, {
"fields": [{
"name": "type_of_payment",
"type": "field"
}, {
"name": "check_digit",
"type": "field"
}]
}],
"caption": "Direct Deposit",
"id": "b456b9d2137ac340177c36328144b0ef",
"scope_name": "x_dnf_table"
}, {
"_bootstrap_cells": 12,
"_count": 1,
"visible": true,
"columns": [{
"fields": [{
"name": "account_number",
"type": "field"
}, {
"name": "account_title",
"type": "field"
}, {
"name": "financial_institution_name",
"type": "field"
}]
}],
"caption": "",
"id": "",
"scope_name": "x_dnf_table"
}
Notice the first "section" has a caption, but ServiceNow treats the split section as its own separate section with no caption at all.
I want to change the spModel directive to produce only containers with captions as their own tab and if a container does NOT have a caption, to append it to the previous container that does have a caption.
I don't think you can edit this function as this is hosted as a file on Servicenow. See https://hi.service-now.com/scripts/app.$sp/directive.spModel.js then just control-f for the getNestedFields.
Per this thread; https://community.servicenow.com/thread/247907#1059129 I believe spModal is just a wrapper for $uibModal.
What you can do is make your own directive on sp_angular_provider.
I am using Amchart's serial chart in ionic framework. I have rendered the serial chart using
var chart = AmCharts.makeChart("chartdiv",
{
"type": "serial",
"categoryField": "Name",
"rotate": true,
"angle": 30,
"depth3D": 40,
"startDuration": 1,
"fontSize": 10,
"theme": "default",
"precision": 4,
"creditsPosition": "bottom-right",
"responsive": {
"enabled": true
},
"categoryAxis": {
"gridPosition": "middle",
"title": "Name",
"inside": true
},
"graphs": [
{
"balloonText": "[[title]] of [[Name]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "X",
"type": "column",
"valueField": "X"
},
{
"balloonText": "[[title]] of [[Name]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "Y",
"type": "column",
"valueField": "Y"
},
{
"balloonText": "[[title]] of [[Name]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-3",
"title": "Z",
"type": "column",
"valueField": "Z"
}
],
"valueAxes": [
{
"id": "ValueAxis-1",
"title": "Amount"
}
],
"titles": [
{
"id": "Title-1",
"text": "SUMMARY"
}
],
"legend": {
"enabled": true,
"useGraphSettings": true,
"position": "bottom"
},
"dataProvider": $scope.data,
"listeners": [{
"event": "clickGraphItem",
"method": function (event) {
$scope.SelectedX = event.item.category;
$scope.SelectedContext = event.item.dataContext;
$scope.LoadDetailsData($scope.SelectedX, $scope.SelectedContext.Period);
}
}]
}
);
chart.addListener("dataUpdated", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(0, chart.dataProvider.length - (chart.dataProvider.length - 3));
}
I am opening IonicModal on click of graph items and creating another chart. When I close the IonicModal, page which contains the above chart gets freezed untill I press hardware back button.
I am using pie charts few places but not facing this issue on those pages. It seems there is some issue with the serial chart only.
Using IonicModal from template URL option to open Modal -
$ionicModal.fromTemplateUrl('template.html', { scope: $scope })
.then(function (modal) {
$scope.sortModal = modal;
});
$scope.sortShow = function () {
//alert('inside show');
$timeout(function () {
$scope.sortModal.show();
$scope.LoadDetailsChart(); //creating next chart data
}, 0);
};
$scope.sortClose = function () {
$scope.sortModal.hide();
};
$scope.$on('$destroy', function () {
$scope.sortModal.remove();
});
I just need to add paneventenabled property as false here. As per amcharts docs,
This setting affects touch-screen devices only. If a chart is on a page, and panEventsEnabled are set to true, the page won't move if the user touches the chart first. If a chart is big enough and occupies all the screen of your touch device, the user won’t be able to move the page at all. That's why the default value is "false". If you think that selecting/panning the chart or moving/pinching the map is a primary purpose of your users, you should set panEventsEnabled to true.
I am using angular-selectize directive in my project. For this, I need to load optgroups asynchronously. So far I have tried multiple approaches but none of them works. The problem is, you cannot use the data returned by a promise synchronously. On the flip side, I have also been unable to initialize selectize from inside a promise callback. Given below is the code I currently have. Note that it is only to be used to get the idea of the data I'm playing with, not to present it as something you can consider right.
app.js
$http
.get('/get-categories')
.then(getCategoriesSCB, getCategoriesFCB);
function getCategoriesSCB(response) {
if(typeof(response.data) === 'object') {
posControl.menuCategories = response.data[0];
posControl.menuCategoryGroups = response.data[1];
}
else {
getCategoriesFCB(response);
}
}
function getCategoriesFCB(response) {
console.log(response);
}
posControl.menuConfig = {
valueField: 'id',
labelField: 'title',
placeholder: 'Select Category',
optgroupField: 'class',
optgroupLabelField: 'label',
optgroupValueField: 'value',
optgroups: posControl.menuCategoryGroups,
maxItems: 1,
searchField: ['title', 'category'],
onInitialize: function(selectize) {
console.log('selectize is here');
},
}
index.html
<selectize config="POSCtrl.menuConfig" options="POSCtrl.menuCategories" ng-model="POSCtrl.menuModel"></selectize>
data returned by ajax call
[
// this array has to be used for options.
[{
"class": "57b83830babb9",
"category": "Food Menu",
"id": "57b83855b23f9",
"title": "Beverages"
}, {
"class": "57b83830babb9",
"category": "Food Menu",
"id": "57b83855c05de",
"title": "Cuisines"
}, {
"class": "57b83830babb9",
"category": "Food Menu",
"id": "57b83855cdcb4",
"title": "Steaks"
}, {
"class": "57b83830d0899",
"category": "Wholesale Coffee",
"id": "57b83830d0899",
"title": "Wholesale Coffee"
}],
// this array has to be used for optgroups
[{
"value": "57b83830babb9",
"label": "Food Menu"
}, {
"value": "57b83830d0899",
"label": "Wholesale Coffee"
}]
]
You should be able to load a selectize asynchronously by setting the values directly on the posControl.menuConfig:
function getCategoriesSCB(response) {
if (typeof(response.data) === 'object') {
posControl.menuConfig.options = response.data[0];
posControl.menuConfig.optgroups = response.data[1];
}
}
I am new to Angular and just getting used to how everything fits together. I want to display a chart through a directive. This chart will be static data so will neither be dynamically loaded nor updated, it is taken from a JSON.
I have referenced here but the main difference is that I am not loading Highcharts in the view. I am loading it globally in the .js file from my bower_components directory. This is my code:
.js
/* global Highcharts */
angular.module("fusoDataLoggerChart", [])
.controller("fusoDataLoggerChartController", ["$http", "$scope", function($http, $scope) {
"use strict";
$scope.data = {
"activities": [
{},
{},
{
"title": "Engine speed",
"type": "DATA_LOGGER",
"result": {
"Engine speed": {
"data": [
{
"timestamp": 0,
"value": {
"type": "QUANTITY",
"unit": "rpm",
"value": 900
}
},
{
"timestamp": 1000,
"value": {
"type": "QUANTITY",
"unit": "rpm",
"value": 1000
}
},
{
"timestamp": 2000,
"value": {
"type": "QUANTITY",
"unit": "rpm",
"value": 2000
}
}
]
},
"Accelerator pedal position": {
"data": [
{
"timestamp": 0,
"value": {
"type": "QUANTITY",
"unit": "%",
"value": 0
}
},
{
"timestamp": 1000,
"value": {
"type": "QUANTITY",
"unit": "%",
"value": 10.6
}
},
{
"timestamp": 2000,
"value": {
"type": "QUANTITY",
"unit": "%",
"value": 11
}
}
]
}
}
}
]
}
}])
.directive("fusoDataLoggerChart", function() {
"use strict";
return {
scope: {},
restrict: 'E',
link: function(scope) {
scope.dataLoggerData = scope.data["activities"][2]["result"];
scope.timestamps = getData()[0];
scope.engineSpeeds = getData()[1];
scope.pedalPositions = getData()[2];
var chart = new Highcharts.Chart({
chart: {
type: 'line',
animation: false,
renderTo: "DataLoggerChartContainer",
zoomType: 'x'
},
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
type: "linear",
title: {
text: "Timestamp"
},
min: 0,
categories: scope.timestamps
},
yAxis: [{ //Engine Speed
title: {
text: 'Engine Speed'
},
labels: {
format: '{value} RPM'
},
opposite: true
}, { //Accelerator Pedal Position
title: {
text: 'Accelerator Pedal Position'
},
labels: {
format: '{value} %'
},
min: 0,
max: 100,
// FIXME: 'allowDecimal' may not work
allowDecimal: true
}],
series: [{
name: 'Engine Speed',
type: 'spline',
yAxis: 1,
tooltip: {
valueSuffix: ' RPM'
},
data: scope.engineSpeeds
}, {
name: 'Accelerator Pedal Position',
type: 'spline',
yAxis: 2,
tooltip: {
valueSuffix: ' %'
},
data: scope.pedalPositions
}]
});
function getData() {
var timestamps = [],
engineSpeeds = [],
pedalPositions = [];
var engineSpeedData = scope.dataLoggerData["Engine Speed"]["data"],
pedalPosData = scope.dataLoggerData["Accelerator Pedal Position"]["data"];
for (var i in engineSpeedData) {
timestamps.push(engineSpeedData[i].timestamp);
}
for (var j in engineSpeedData) {
engineSpeeds.push(engineSpeedData[j].value.value);
}
for (var k in pedalPosData) {
pedalPositions.push(pedalPosData[k].value.value);
}
return [timestamps, engineSpeeds, pedalPositions];
}
}
}
});
HTML
<fuso-data-logger-chart>
<div id="DataLoggerChartContainer"></div>
</fuso-data-logger-chart>
When I go to where the chart is to be rendered, nothing is shown (and only the HTML code set manually is displayed with nothing inside when I check in DevTools).
N.B: I realize I do not need the controller yet but it is there as in future the JSON will be got from a rest call from within the controller
Any help appreciated.
This isn't a full answer to your question, but I noticed a way you can make your HTML directive a little cleaner so that you could instead use this format:
<fuso-data-logger-chart></fuso-data-logger-chart>
You don't need the <div id="DataLoggerChartContainer">. You can embed that in the directive definition as a template:
.directive("fusoDataLoggerChart", function() {
"use strict";
return {
scope: {},
restrict: 'E',
transclude: true,
template: '<div id="DataLoggerChartContainer"></div>'
link: function(scope) {
... your other code ...
}
}
});
I have figured out the problem. There were multiple errors but I'll leave this here so maybe someone else can find it useful:
Highcharts and my FusoDataLoggerChart.js were not loaded into index.html (<script src="modules/readVehicleData/FusoDataLoggerChart.js"></script>) meaning that they couldn't be seen by Angular.
In my directive, I was trying to access the local scope (scope.data) in the link() function instead of trying to access the parent scope in the controller where the data is set. To access the parent scope, scope.$parent.data worked for me (N.B: was only 'data' for me as that's the value I set)
The following data is being used to load and display a grid dynamically. The only difference between the two grids is that the first reader takes in the data below as is, but the second grid only knows about the data and the metaData will be generated on the fly. I placed stubs for the fields and columns as this is not the issue and I haven't decided on how I will generate the data yet.
Both of the readers eventually pass the data below to the JsonReader's readRecords()' function via this.callParent([data]);, but the second one does not display the data. The data is there, but I am not sure why it does not display?
There are two links to demos below. The first is a JSFiddle that loads from memory and the second is a Sencha Fiddle that loads through AJAX.
Snippet
var rawFields = [
{ "name": "year", "type": "int" },
{ "name": "standard", "type": "string" },
{ "name": "bitRate", "type": "float" }
];
var rawColumns = [
{ "text" : "Year", "dataIndex" : "year", "flex" : 1 },
{ "text" : "Standard", "dataIndex" : "standard", "flex" : 1 },
{ "text" : "Bit/Sec", "dataIndex" : "bitRate", "flex" : 1 }
];
Ext.define('Example.reader.DynamicReader', {
extend : 'Ext.data.reader.Json',
alias : 'reader.dynamicReader',
readRecords : function(data) {
var response = {
data: data,
metaData : this.createMetaData(data),
success: true
};
console.log(response);
return this.callParent([response]);
},
createMetaData : function(data) {
return {
idProperty : "id",
fields : rawFields, // These will eventually be generated...
columns : rawColumns // These will eventually be generated...
};
}
});
Data
{
"data": [
{
"id": 0,
"year": 1997,
"standard": "802.11",
"bitRate": 2000000
},
{
"id": 1,
"year": 1999,
"standard": "802.11b",
"bitRate": 11000000
},
{
"id": 2,
"year": 1999,
"standard": "802.11a",
"bitRate": 54000000
},
{
"id": 3,
"year": 2003,
"standard": "802.11g",
"bitRate": 54000000
},
{
"id": 4,
"year": 2007,
"standard": "802.11n",
"bitRate": 600000000
},
{
"id": 5,
"year": 2012,
"standard": "802.11ac",
"bitRate": 1000000000
}
],
"metaData": {
"idProperty": "id",
"fields": [
{
"name": "year",
"type": "int"
},
{
"name": "standard",
"type": "string"
},
{
"name": "bitRate",
"type": "float"
}
],
"columns": [
{
"text": "Year",
"dataIndex": "year",
"flex": 1
},
{
"text": "Standard",
"dataIndex": "standard",
"flex": 1
},
{
"text": "Bit/Sec",
"dataIndex": "bitRate",
"flex": 1
}
],
"success": true
}
}
Demos
The following examples both achieve the same thing, so the only difference is the loading of the data.
Loading from Memory
http://jsfiddle.net/MrPolywhirl/zy4z5z8a/
Loading from AJAX
https://fiddle.sencha.com/#fiddle/d3l
I figured out the answer. I needed to specify a root value for the reader so that the data can be mapped properly.
Ext.onReady(function() {
Ext.widget("dynamicGrid", {
title: 'WiFi LAN Data Rates [Dynamic]',
renderTo: Ext.get('example-grid-dynamic'),
readerType: 'dynamicReader',
// This need to match the 'data' key specified in the `response` object
// that was created in readRecords().
readerRoot: 'data',
data : rawData
});
});
The documentation for root notes that the root property has to map to the data portion of the response.
Documentation for Json.root:
Ext.data.reader.Json.root
root : String
The name of the property which contains the data items corresponding to the Model(s) for which this Reader is configured. For JSON reader it's a property name (or a dot-separated list of property names if the root is nested). For XML reader it's a CSS selector. For Array reader the root is not applicable since the data is assumed to be a single-level array of arrays.