Breezejs + Angular - How to Properly Map Database Property Names? - angularjs

I have a working and reusable custom <select> directive that populates via ng-options, here is the snippet:
ng-options="datum.name for datum in data track by datum.id"
This works as intended when I use a local test JSON file to populate it as I can define the name and id properties manually. When using Breezejs (which is properly pulling back data as expected), the database has Product and DeviceID instead of the desired name and id properties.
I want to be able to pull the data, but map Product and DeviceID to name and id as doing so ensures the goal of reusability of my custom <select> directive. Many different entities will need to map to name and id, so this is important for reusability.
How do I accomplish this? I've looked at Mapping JSON to entities and JsonResultsAdapter thinking this is the right direction. Unfortunately, these examples seem to be missing what I need (unless I'm missing something).
Are there other solutions or ways to tackle this problem? Is there a best practice way of doing this using breezejs? Thank you in advance for any light you can shed.
*Found a solution
I was using a custom directive like so (but I now add the options-map attribute):
<sel-select-box
id="selectBoxDevice1"
select-size="10"
options-map="datum.Product for datum in data track by datum.DeviceID"
service-in="deviceSearchDataService"
service-in-watch="getDevice1Matches"
service-in-restore="getDevice1Selection"
service-out="deviceSearchDataService"
service-out-send="updateDevice1Selection">
</sel-select-box>
Then in my reusable <select> I reference the {{optionsMap}} like so:;
<select
class="form-control"
ng-model="selected"
ng-change="onChange()"
ng-click="onClick()"
ng-options="{{optionsMap}}"
data-ng-attr-size="{{selectSize}}">
</select>
As a result I can now use the numerous custom <sel-select-box> directives and simply add the proper map string that the <select>'s ng-options utilizes.
I'm super stoked this works and that it achieves the flexibility I desire, but I'm still open to improved ideas and/or suggestions.

Have you looked at a custom NamingConvention? The NC is dedicated to the business of mapping between client-side and server-side entity property names

Related

Specify Angular Schema Form Select drop down options using scope

I've been looking at using Angular Schema Form to define all my forms for my project but one thing that stood out to me massively is that when we define a select/drop-down element, the values have to be specified then and there in the JSON. This doesn't strike me as very flexible as I want these values to be retrieved from my Angular controller/factory as they are currently available on the scope.
I've done quite a bit of searching on how to get round this but haven't found a definitive solution or anything that worked for me so I decided to try to extend the Select myself and add a mapping to the schemaFormDecoratorsProvider.
I have followed the documentation for Extending Schema Form, and now have an HTML snippet which defines my Select control and this is being rendered when I define it in my JSON schema. What I want to be able to do is to specify the ng-options attribute either in part as a whole via the JSON schema. I have tried to do this but nothing seems to result in the select options being rendered.
Here is part of my select control:
<select ng-model="$$value$$"
ng-model-options="form.ngModelOptions"
sf-changed="form"
schema-validate="form"
ng-options="item.value as item.name for item in form.titleMap"
ng-disabled="form.readonly">
</select>
Where ng-options is defined, I want to be able to either specify titleMap in my JSON and it be resolved to an object on my scope or I can pass the name of the collection in my JSON and then pass that in where form.titleMap currently sits.
Anybody had any experience doing this? To me is seems like a fairly reasonable requirement but can't find much help on the web about it.
Many thanks.
There are add-ons designed to support dynamic data selection, the library has no preference and leaves it up to the developer to select the most appropriate for their needs, however I built the Material Design decorator to include the capabilities of angular-schema-form-external-options in the decorator so the add-on is not needed. The bootstrap decorator does not have this capability at this stage.
The angular-schema-form-external-options library is basic but covers most requirements for simple dynamic drop down data population
The angular-schema-form-dynamic-select is a more robust and feature full option with a variety of configurable options.

How to get ng-model to bind to variable in nested ng-repeat ($scope.{outerloop.name}.data[innerloop.name])

The UI is built with 2 ng-repeats. The top level is specified by a json and has fields like patient, facility, dr. Each of these can be expanded into detail data like the patient name, address, etc, the specs of which are populated by a different api call.
General structure:
<div ng-repeat="field in json"><!--top level input and expand button-->
<div class="expands">
<input ng-repeat="subfield in details" ng-model="and this is the problem...">
The data is in the scope as follows:
$scope.idpatient.data['patients.name']
$scope.idpatient.data['patients.address']
$scope.idfacility.data['facilities.address']
and so on
So I'm trying to bind ng-model to {{field.name}}.data[subfield.key], and it doesn't let me parse variables from field. I've heard weird stuff happens with scope and ng-repeat, but if I put in the string literally (idpatient.data[subfield.key]) it binds fine to data for that object. It seems like I'm trying to do something pretty simple but I've been tearing my hair out trying to figure out how.
PS: I've never used angular before and inherited a system that I believe breaks a lot of best-use rules. Please be gentle if I'm committing an angular cardinal sin
Putting data in $scope.objdata[field.name][subfield.key] binds correctly. I knew it had to be stupid simple
(too bad the code throughout our system expects it to be in $scope.objname.data[key] format...)

Dynamically create angular checkboxes and get their values

I have a program that needs to check an API for all the current users on the system, and then present a form to an administrator who can decide which ones to give certain powers. I can't figure out how to get the information modeled into my formData in order to do this. I have this but it does not work:
<p ng-repeat="f in mdfields"><input type="checkbox" ng-model="formData.checkboxes" ng-true-value="{{f}}"> {{f}}</p>
The mdfields is just an array of every user's name.
That may give you an idea though of what I want: I just want to display all the names of users, and let the admin select as many of them as he wants, then have that information available to $scope.formData so I can pass it to another API call and do stuff.
Edit: To clarify a bit, the list of checkboxes that gets called can change often, and ideally, I want the ability to send some data back to the server that says specifically something like:
["jao smith":true]
["frank jones":false]
although it would be fine to send back to server only the names of people who have been checked.
Without knowing more about you models there are several ways you can do it:
As property of fobject - can filter mdfields array to find selected:
<input ng-model="f.selected">
All in one scope variable array (not a good choice if doing any filtering because indexing changes):
<input ng-model="formData.checkboxes[$index]"
ng-init="formData.checkboxes[$index]=formData.checkboxes[$index]|false">
In a scope variable object - easy to collect selected by id
<input ng-model="formData.checkboxes[f.id]">

UI Bootstrap's typeahead refuses to iterate through object

According to docs found on official ui-bootstrap, typeahead directive "uses the same, flexible syntax as the select directive"
But unfortunatelly it seems that typeahead directive refuses to iterate through object sources using the following list of syntaxes supported by select
for object data sources:
label for (key , value) in object
select as label for (key , value) in object
label group by group for (key, value) in object
select as label group by group for (key, value) in object
I think that UI-Bootstrap's ui-bootstrap-tpls-0.4.0.js need to be edited (somewhere around line 2749) to allow this kind of functionality
So my question is what is angular and ui-bootstrap-friendly approach to implementing this functionality, (I can do it by replacing the .length with something that is more object-friendly, but I guess that there are lot more better ways of supporting the select object datasource syntax, than I can provide)
Thank you,
Indeed, the current implementation of the typeahead directive from http://angular-ui.github.io/bootstrap/ works only on sources that are arrays, so there is no way to iterate over objects. I've opened an issue to clarify this in the documentation:
https://github.com/angular-ui/bootstrap/issues/715
The culprit is this piece of code, really:
https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/typeahead.js#L109-L115
While switching it to the angular.forEach would make the situation better, the main problem is that built-in AngularJS filters won't work on objects... So you would have to write your own matching logic as well. This is why I've decided to drop support for the (key, value) syntax.
Currently your best option is to convert your object to an array.
So I'm going to update the docs to make it clear what is supported and what is not. But if you can see a perfect solution here, feel free to send a pull request!

Cognos : Persisting Checkbox state across Multiple Pages

On the Cognos Report Results Page, we need to have a checkbox for each row.
The checkbox is designed using HTMLITEM tag.
However, the problem we face is that the state of the checkbox (checked or unchecked) is not persisted when we go to the next page/previous page.
I am very new to Cognos and I need to know if there is a way to do this.
I am fairly good at JAVAScripting and JSP, but since we only have access to HTML elements and not JSP Tags (Cognos uses CGI anyways), I cannot get the request object.
If there is some way to retrieve the request objects parameters of previous submit(previous page), that would help in solving the issue to a large extent, I feel.
Jonas
There isn't really enough information on what your end goal is to be able to assist you with this properly. There are a few ways that spring to mind that would allow you to use JS on the report to remember previously checked items, but there may be a much better way to do this depending on your requirements.
Without having more details, the first thing that leaps to mind is simply having some JavaScript set and unset cookie values on check/uncheck on the checkbox.
Note, there could be a variety of other ways to work this, including upping the number of visible rows per page, etc...
You can create a dataitem in a query where you can determine whether your checkbox should be checked or not. In the design of your list on the report page you can render a HTMLItem within the list, and base the HTMLItem on a DataItem. Your HTML must than be something like
<input type="checkbox" value="""+ [DataItemValueToPass] + """ " + [DataItemCheckedOrNot] ></input>

Resources