List of elements gets overridden in angular js when using in dropdown - html

I want to show a hierarchy like in the image. I am able to create this hierarchy and I want to show the second level elements in a dropdown. However, while doing this the hierarchy value gets overrided with dropdown value and hence I am not able to show the third level of hierarchy.
This is my Dropdown html page:
Business Domain
OK
This is my controller:
controller('domainController', ['$scope', '$state', 'DomainNameService', function($scope, $state, DomainNameService) {
$scope.busdomain = DomainNameService.getBusDomainName();
/*For populating the domain values Which I am fetching from service
Attached the json image*/
var domainList=DomainNameService.getBusDomainName();
if(domainList!=null){
domainList[0].childNode.sort();
for (var i = 0; i < domainList[0].childNode.length; i++) {
if (domainList[0].childNode[i].name!=null) {
var name=domainList[0].childNode[i].name;
domainList[0].childNode.splice(i,1,name);//for replacing the object with name as I have to show name in dropdown list
$scope.busdomainname=domainList[0].childNode;//got the list of name but after this my service list also get overrides
$scope.busdomainname.sort();
break;
}
else
{
$scope.busdomainname=$scope.busdomain[0].childNode;//Added for getting business domain list
$scope.busdomainname.sort();
}
}
}
$scope.addSubDomainTree = function(val){
var varType = "busSubDomain";
var domain=[];
var busDomain=$scope.bussubdomain;
var parent = DomainNameService.getDomainName()[0];
//Done some code here to get the hierarchy
DomainNameService.setBusDomain($scope.statements);
$scope.domain.domainName = DomainNameService.getBusDomainName[0];
$state.go('BusDomainTree', null, { reload: true });//fix for refresh issue.
}
}
}
This is my Service Method
setChildBD: function(varType,childBD,value,val){
if(varType == "busSubDomain"){
this.error=undefined;
if(childSubDomainName.indexOf(childBD)==-1){
childSubDomainName.push(childBD);
var i= childDomainName.indexOf(val);
//Done this for replacing the object name with an array which contains the child.attached the image for its value
childDomainName.splice(i,1,value.childNode[0]);
}
},
getBusDomainName: function(){
return this.busDomainValue;//here the busDomainValue gets overrided with the controller list value
},
Can anyone please suggest how to resolve this issue?

Got a solution for this. I used var domainList=angular.copy($scope.busdomain) instead of var domainList=DomainNameService.getBusDomainName(); in controller.js –

Related

How to build dynamic dropdowns in configuration setup?

I'm new to Google Data Studio and looking into building a community connector for our Saas service.
For the configuration section, I need to use the Stepped Configuration process. Basically, I nested set of drop-down lists.
However, I need the data to populate those lists to come from my API. I have the REST service endpoints defined, but I cannot find any documenation/examples of how I'd configure this in the getConfig section of the community connector.
Does anyone have a working example I could use as reference?
In reviewing the documentation, there is a section on stepped configurations, which is what I am looking for. You can find that example here: https://developers.google.com/datastudio/connector/stepped-configuration#dynamic_dropdowns
In this example, they show the following for defining the dropdown values.
Notice for the states, they have hard-coded the values for "Illinois" and "California".
My question is, how can I dynamically call API to retrieve values to populate this list? I have 3 nested dropdowns, each with a separate API call, using the answer from previous dropdown to drive the next.
For example first API might be http://myapi.com/countries which returns list of countries.
When they select country, next API call might be http://myapi.com/states?country=US
etc.
config.newSelectSingle()
.setId("state")
.setName("State")
// Set isDynamic to true so any changes to State will clear the city
// selections.
.setIsDynamic(true)
.addOption(config.newOptionBuilder().setLabel("Illinois").setValue("IL"))
.addOption(config.newOptionBuilder().setLabel("California").setValue("CA"));
if (!isFirstRequest) {
var city = config.newSelectSingle()
.setId("city")
.setName("City");
var cityOptions = optionsForState(configParams.state);
cityOptions.forEach(function(labelAndValue) {
var cityLabel = labelAndValue[0];
var cityValue = labelAndValue[1];
city.addOption(config.newOptionBuilder().setLabel(cityLabel).setValue(cityValue));
});
}
return config.build();
}
Worked through the issues I was having. For others who might have hit similiar issues, here's my working getConfig() method.
function getConfig(request) {
var config = cc.getConfig();
var configParams = request.configParams;
var isFirstRequest = configParams === undefined;
if (configParams ===undefined || configParams.tab ===undefined) {
config.setIsSteppedConfig(true);
}
var url ='https://<yourAPIURL>';
var userProperties = PropertiesService.getUserProperties();
var key = userProperties.getProperty('dscc.key');
var mykey ="Bearer " + key
var options = {
"method" : "GET",
"headers" : {
"AUTHORIZATION" : mykey,
"cache-control": "no-cache"
}
};
var response = UrlFetchApp.fetch(url,options);
var parsedResponse = JSON.parse(response);
var zoneControl = config.newSelectSingle()
.setId("zone")
.setName("Zone")
.setIsDynamic(true);
parsedResponse.map(function(itm) {
zoneControl.addOption(config.newOptionBuilder().setLabel(itm.name).setValue(itm.id))
});
if(configParams !==undefined && configParams.zone !==undefined){
var blockurl ='https://<yourAPIURL>?zoneid='+ configParams.zone;
var blockResponse = UrlFetchApp.fetch(blockurl,options);
var parsedBlockResponse = JSON.parse(blockResponse);
var blockControl = config.newSelectSingle()
.setId("block")
.setName("Block")
.setIsDynamic(true);
parsedBlockResponse.map(function(itm) {
blockControl.addOption(config.newOptionBuilder().setLabel(itm.name).setValue(itm.blockKey))
});
}
if(configParams !==undefined && configParams.block !==undefined){
var taburl =''https://<yourAPIURL>?blockKey='+ configParams.block;
var tabResponse = UrlFetchApp.fetch(taburl,options);
var parsedTabResponse = JSON.parse(tabResponse);
var tabControl = config.newSelectSingle()
.setId("tab")
.setName("Tab")
parsedTabResponse.map(function(itm) {
tabControl.addOption(config.newOptionBuilder().setLabel(itm.name).setValue(itm.internalname))
});
}
return config.build();
}
without testing the code:
function getConfig(request) {
var configParams = request.configParams;
var isFirstRequest = configParams === undefined;
var lst=["A","B","C"]; // your values obtained from REST
var tmp=config.newSelectSingle(); //add element to side
var element=tmp.setId("state").setName("State").setIsDynamic(true); // set name and id
for(var i in lst) // set all the values:
{
element = element.addOption(config.newOptionBuilder().setLabel(lst[i]).setValue(lst[i]))
}
if(isFirstRequest || configParams.state==undefined) // no state selected yet
{
config.setIsSteppedConfig(true); // stop here
}
else
{
// next dropdown element,
// Rest API with element set to: configParams.state
var lst2= ["x","y","z"]
var tmp2=config.newSelectSingle(); //add element to side
var element2=tmp2.setId("element2").setName("Element 2 depends on "+configParams.state).setIsDynamic(true); // set name and id
for(var i in lst2) // set all the values:
{
element2 = element2.addOption(config.newOptionBuilder().setLabel(lst2[i]).setValue(lst2[i]))
}
// code for 3rd
}
}
If the user changes the first dropdown value alle other drop downs have to be reset. This may be a bit tricky.

React node to be removed is not a child of this node html5 drag and drop

Background:
I have a react app which has a dropdpown with some teams and on selecting a team it will load the possible client and selected clients(if any selected earlier)
The issue is when i drag a value from possible to selected, the value gets appended in the selected but with the below error
possible to selected error
and when i move some existing clients in selected to possible i will get the below error and the value gets shown twice.
twice added error
This is the code for drop.
drop(ev) {
ev.preventDefault();
let data = ev.dataTransfer.getData('text');
ev.target.appendChild(document.getElementById(data));
let p = ReactDOM.findDOMNode(this.refs.plist.refs.dnd);
let pItems = (p.getElementsByTagName('li'));
let s = ReactDOM.findDOMNode(this.refs.slist.refs.dnd);
let sItems = s.getElementsByTagName('li');
this.setState({
possibleClients: createClientJson( pItems),
selectedClients: createClientJson(sItems),
});
}
function createClientJson(items) {
let result = [];
for(let i=0; i<items.length; i++) {
result.push(JSON.parse(items[i].getAttribute('data-info')));
}
return result;
}

Flex selectedItem sort order

I have a code as following
var selectedWindows = new ShowSelectedFilesFolderWindow;
selectedWindows.setParentData(MainFileGrid.selectedItems);
The problem is that when I retrieved the list from the dialog, the list(hierarchical data) was sorted according to the way the selection was made in the main window. For example, if I selected bottom-up,it displayed folder first, if I selected up-to-bottom, it displayed file first.
How can I keep the default folder first display ?
I got it solved as the following
public function setParentData(obj:Object):void{
var tempArr:Array = obj as Array;
if(tempArr[0].Type == "file"){
this.parentData = tempArr.reverse();
}else{
this.parentData = tempArr;
}
}

Binding JSON data to property of bound scope variable in angular

I am struggling to create a model in Angular. The model is basically a parent child relationship like a ul => li relationship
I have successfully bound the parent JSON array to the $scope.parents variable, and I can ng-repeat over the parent variables.
However when i go to add children to the $scope.parents.children from a promised result, i get nothing in the view.
My controller code is as follows:
departmentModule.controller("departmentController", function ($scope, departmentService) {
$scope.parents = [];
$scope.tempArr = [];
//Load initial root/parent structure
departmentService.getParents(getSelectedEventId()).then(function (result) {
$scope.parents = result;
$scope.bindChildNodes()
});
//loop through parent structure and get child nodes 1 level deep for initial load
$scope.bindChildNodes = function () {
for (var i = 0; i < $scope.parents.length; i++) {
var assignmentId = $scope.parents[i].ID;
$scope.parents[i].children = [];
departmentService.getChildren(getSelectedEventId(), assignmentId).then(function (result) {
//i would send result to children here, but this function doesnt have access to the i var to know what parent the children belong too..
$scope.tempArr = result;
});
$scope.parents[i].children = $scope.tempArr;
}
}
});
When i assign the $scope.tempArr to the children property of its parent: $scope.parents[i].children It somehow loses its value - so a console.log of $scope.parents[0].children is an empty array.
Any ideas or help with this one? Why cant I assign a JSON object to a child property of a scope variable?
Simple Plunkr simulation is here
Thanks so much in advance.

How do you get a selection from a DocsListDialogue?

I have a docs List dialogue, here is my code so far. How do I get the actual selection from the DocListDialogue though? I keep tried eventInfo.parameter,but that only returned a generic object and I need a file to be returned. Here is my code:
function init() {
var app = UiApp.createApplication().setTitle("WriteWell");
var selectionHandler = app.createServerHandler("selectHandler");
app.createDocsListDialog().showDocsPicker().setDialogTitle("Select File to Open").addSelectionHandler(selectionHandler);
app.add(app.createVerticalPanel().setId("Panel"));
return app;
}
function doGet(e) {
return init();
}
function selectHandler(eventInfo){
var parameter = eventInfo.parameter;//Selection???
var app = UiApp.getActiveApplication();
var panel = app.getElementById("Panel");
panel.add(app.createLabel(parameter.getId()));//Returns an error
}
When inspecting the content of eventInfo.parameter, we see that returns something like this:
{
source=u01234567890,
items=[
{
id=0Abcd-efgH_ijKLLLmnOPQr0stuvwX,
name=file_name,
url=https://docs.google.com/file/d/0Abcd-efgH_ijKLLLmnOPQr0stuvwX/edit?usp=drive_web
}
],
u01234567890=[
{
id=0Abcd-efgH_ijKLLLmnOPQr0stuvwX,
name=file_name,
url=https://docs.google.com/file/d/0Abcd-efgH_ijKLLLmnOPQr0stuvwX/edit?usp=drive_web
}
],
eventType=selection
}
If you need the ID of the selected file, you'll need something like:
...
eventInfo.parameter.items[0].id;
...
If you want to see what is in the eventInfo you can use
Logger.log(Utilities.jsonStringify(eventInfo));
which in this case would return something like that :
[13-10-13 21:25:21:722 CEST] {"parameter":{"source":"u16052058908","items":[{"id":"0AnZ5_ShBzI6pdHd4SWo0bUJYOEp4VFE4cDI1SUFvZFE","name":"Tracker locaux","url":"https://docs.google.com/a/insas.be/spreadsheet/ccc?key\u003d0AnZ5_ShBzI6pdHd4SWo0bUJYOEp4VFE4cDI1SUFvZFE\u0026usp\u003ddrive_web"}],"eventType":"selection","u16052058908":[{"id":"0AnZ5_ShBzI6pdHd4SWo0bUJYOEp4VFE4cDI1SUFvZFE","name":"Tracker locaux","url":"https://docs.google.com/a/insas.be/spreadsheet/ccc?key\u003d0AnZ5_ShBzI6pdHd4SWo0bUJYOEp4VFE4cDI1SUFvZFE\u0026usp\u003ddrive_web"}]}}
Looking at it you'll see that you can get the object properties you want using (for example) :
var docsInfo = eventInfo.parameter.items;
that will return an array of objects (one for each selected file) that contains file names, IDs and urls
Just iterate this objects array to get what you want from each item.