Selecting customer addresses with radio inputs and knockoutjs - javascript

I have an address selection screen. Address data are coming from server. Data covers these values:
Id = Address Id,
Address = Address itself,
TypeCode = 1 or 2 (1 is shipping, 2 is billing address),
IsDefault = boolean (is this default address)
I map these data in two arrays. One of them contains shipping addresses and the other one billing addresses.
I have couple of problems.
I can't set default addresses when server data comes.
When I want to set a new address I click another radio button. When I do that I gave two address id's in "selectedShippingAddress" loop. I think this is not the right way to do this.
Here is the example: http://jsfiddle.net/sevilyilmaz/HnGS4/
Thanks.

You are using checked binding wrong way. It doesn't point to property of object which should be selected, it points to observable which has ID of selected object. i.e.: checked: $parent.selectedShippingAddres and selectedShippingAddres = ko.observable();. Now when you populate your data in updateAddresses you can check and save the default ID:
$.map(data.AddressListItems, function (v) {
if (v.TypeCode === 1) {
viewModel.shippingAddresses.push(v);
if (v.IsDefault) {
viewModel.selectedShippingAddress(v.Id);
}
} else {
viewModel.billingAddresses.push(v);
if (v.IsDefault) {
viewModel.selectedBillingAddress(v.Id);
}
}
});
Working sample: http://jsfiddle.net/HnGS4/4/

Related

Vue - Checkbox all to handle global editing of selects - Object sticking

Codepen
https://codepen.io/ainsleyclark/pen/yLNqmRq?editors=1011
Objective
I'm trying to create a dynamic ordering system for customers.
Files are uploaded which are stored as an array of objects. A table is then created which loops over those files and spits out table rows containing products.
When a user hits one of those products, it makes an ajax request and gets all available options for that product.
When the checkbox all is hit, the user should be able to edit all products and options globally, and when unselected it reverts back to normal behaviour.
The problem:
The v-modelling works absolutely flawlessly when you are not using any checkboxes. You can see
the order being built out with its options. However after you have used the checkboxes, its like the v-modelling is sticking and the options aren't independent of each other any more.
Steps to reproduce:
Hit the checkbox all (top left checkbox in table head)
Select a product (first product entry)
Select an option (first product entry)
Unselect checkbox all
Try and change the options and you will see the order object updating for all objects.
Data:
I have a products array containing products as objects.
A order array, which is where the problem lies, which contains the file key then the product then the options associated with the product.
There is also an options array of objects which gets updated when a user hits the select button, again it contains the file key so I can link it.
Checkbox all:
I believe it has to do with the way Im selecting the product as show below:
checkboxAllHandler(checked) {
if (checked) {
this.files.forEach((file, index) => {
this.selectedFiles.push(index)
});
const product = Object.assign({}, this.order['products'][this.getSelectedFile]);
console.log(product);
const order = Object.assign({}, this.order);
this.selectedFiles.forEach(fileIndex => {
order['products'][fileIndex] = product || {};
});
this.order = {};
this.order = order;
} else {
this.selectedFiles = [];
}
}
Any help is greatly appreciative in advance, It's been a tough problem!
First, you missed :key property in v-for, so all yours rows are treated as same - change this line like this: <tr v-for="(file, fileKey) in files" :key="file">
Second, in you loop you are assigning to all rows the same product, and this is leads to behaviour you want to avoid:
const product = Object.assign({}, this.order['products'][this.getSelectedFile]);
...
this.selectedFiles.forEach(fileIndex => {
order['products'][fileIndex] = product || {};
});

Accessing Other Entities Attributes in Dynamics CRM/365 Forms with javaScript

This function buttonBuzz() works inside the Forms of the Entities Account, Contacts and Leads. But not in the Opportunity form.
Mainly because there is no telephone1 attribute. There is however a Contact entity added with "Quick View" in a section with a telephonenumber inside.
I think it can be accessed with the telephone1 as well just not with Xrm.page
Any ideas how i can grab the attribute from inside the "quick view"?
I dont know if the "Quick view" window is a form of an iFrame. And if it is i have no clue how to access it with the Xrm.Page.getAttribute("telephone1").getValue();
function buttonBuzz(exObj) {
var phoneNumber;
// Here i store the "telephone1" Attribute from the current .page
phoneNumber = Xrm.Page.getAttribute("telephone1").getValue();
if (phoneNumber != null) { **Sends phonenumber** } ...
Quick Views display data from a record selected in a lookup field, in this case a Contact. You can query data from related records using the OData endpoint.
You first need to get the Guid of the record selected:
var contactId = Xrm.Page.getAttribute("parentcontactid")[0].id || null;
You would then need to send a SDK.REST request, passing parameters for the Id of the record (contactId), entityName and the columns:
var entityName = "Contact";
var columns = "Address1_Telephone1, FirstName, LastName";
SDK.REST.retrieveRecord(contactId, entityName, columns, null, function(result) {
// Success, logic goes here.
var address1_Telephone1 = result.Address1_Telephone1;
}, function(e) {
console.error(e.message);
});
As well as your JavaScript file, you would need to include the SDK.REST.js file that is included in the MS CRM SDK download within your Opportunity form libraries.
You can pull that field up from the Contact into the Opportunity by creating a Calculated Field, setting it equal to parentcontactid.telephone1
Put the field on the form, and you'll be able to .getAttribute() it like any other Opportunity field (being Calculated, it updates itself whenever the source changes).

Filter a SharePoint list via dynamic checkboxes instantly (with C# and/or Ajax)

I'm currently looking for a way to add a filter function to a list in SharePoint, which filters the lists content via checkbox selection.
This little mockup might help to understand what I'm talking about:
The idea is to have a normal SharePoint custom list on the right and a checkboxlist on the left side, which will be generated dynamically from the content of the list -> One column is a "filter group" and all the field contents are the filter values.
When selecting one or multiple values on the left side, the items in the list should instantly be filtered accordingly (ajax, without reloading the page).
For example in the mockup, selecting "New York" and "Blue" would only show the item "Steve's Car".
You now, like a product filter in almost every online shop and so on.
How can that be achieved? Would be awesome if this could be included in my solution package (which includes other stuff in C#/jQuery already).
I'm new to frontend customization in SharePoint, but I'm sure there's a way :-)
Edit: I'm using SP2016 by the way.
Pandora!
As i understand it, your first question is how you can dinamically get values for left side filter. I see there two ways: first way, you can build caml query and get items from list; second way, you can use ctx.ListData, which sharepoint initialize by itself and in ctx.ListData.Row (array of items) process items and get unique field values. Note, that ctx.ListData.Row contains only items loaded in list view on the page.
For list filtration you can concat filter link for hash of the page. Example: "?List={ListID}&View={ViewID}&FilterField1=Color-FilterValue1=Blue". Try to filter columns on list and you will see url modification. ListID and ViewId you can retrieve by ctx.listName and ctx.view.
And then pass it in function MyRefreshPageToEx. List will be filtered.
More list filtration info
function FilterList(){
var tableId = $(".ms-listviewtable").attr("id");
var filterUrl = "?List={ListID}&View={ViewID}&FilterField1=Color-FilterValue1=Blue";
MyRefreshPageToEx(tableId, filterUrl, false);
}
function MyRefreshPageToEx(lvTableID, url, bForceSubmit) {
var tblv = document.getElementById(lvTableID);
var clvp = CLVPFromCtx(tblv);
if (clvp != null && clvp.ctx.IsClientRendering) {
clvp.RefreshPaging(url);
clvp.ctx.queryString = url;
if ((typeof clvp.ctx.operationType == "undefined" || clvp.ctx.operationType == SPListOperationType.Default) && Boolean(clvp.ctx.ListData)) {
var fromPage = clvp.ctx.ListData.FirstRow - 1;
var toPage = Number(GetUrlKeyValue("PageFirstRow", false, url));
if (!isNaN(fromPage) && !isNaN(toPage) && fromPage != toPage)
fromPage < toPage ? (clvp.ctx.operationType = SPListOperationType.PagingRight) : (clvp.ctx.operationType = SPListOperationType.PagingLeft);
}
}
else {
SubmitFormPost(url, bForceSubmit);
}
}

Xrm.Utility.openEntityForm setting Look Up field

I am attempting to use the Xrm.Utility.openEntityForm() method to open a new custom entity form and programatically set an entity look up field. I am following an example on http://msdn.microsoft.com/en-us/library/gg334375.aspx very closely but getting nondescript error. Any help with actually setting the field or possibly finding the logs for the error would be appreciated.
The code example I am following.
function OpenNewContact() {
var parameters = {};
//Set the Parent Customer field value to “Contoso”.
parameters["parentcustomerid"] = "2878282E-94D6-E111-9B1D-00155D9D700B";
parameters["parentcustomeridname"] = "Contoso";
parameters["parentcustomeridtype"] = "account";
//Set the Address Type to “Primary”.
parameters["address1_addresstypecode"] = "3";
//Set text in the Description field.
parameters["description"] = "Default values for this record were set programmatically.";
//Set Do not allow E-mails to "Do Not Allow".
parameters["donotemail"] = "1";
// Open the window.
Xrm.Utility.openEntityForm("contact", null, parameters);
}
The function I have created to do the same with my custom entity is as follows :
function createNewService() {
var locationId = trimBrackets(Xrm.Page.data.entity.getId());
var primaryField = Xrm.Page.data.entity.getPrimaryAttributeValue();
var entityLogicalName = Xrm.Page.data.entity.getEntityName();
var parameters = {
cw_location: locationId,
cw_locationname: primaryField,
cw_locationtype: entityLogicalName
};
Xrm.Utility.openEntityForm("cw_service", null, parameters);
}
the name of the entity I am opening a form work = cw_service (this isn't the problem as I can open a blank form with Xrm.Utility.openEntityForm("cw_service");)
the name of the field I am trying to set is cw_location.
I'd post a picture of the error message but I don't have the reputation yet to do that.
For simple lookups you must set the value and the text to display in the lookup. Use the suffix “name” with the name of the attribute to set the value for the text.
Don’t use any other arguments for simple lookups.
For customer and owner lookups you must set the value and the name in the same way you set them for simple lookups. In addition you must use the suffix “type” to specify the type of entity. Allowable values are account, contact, systemuser, and team.
For your example, it is a simple lookup, I suppose. So, Please try using the code below:
var parameters = {
cw_location: locationId,
cw_locationname: primaryField
};
For more information, Please visit Set the value for lookup fields.

Send additional data with autocomplete options

I have a field that autocompletes on person name, so it has options like "Obama, Barack", "Lincoln, Abe", etc.
These people also have additional attributes, say "Birthplace" and "Phone number". When a user picks an option from the autocomplete, I would like that person's additional attributes to automatically populate hidden form fields.
The web service that supplies the autocomplete options also knows everyone's birthplace and phone number, so it could send this data to the client. However, the jQuery autocomplete plugin I'm using doesn't accept any additional data like this -- you can only give it the autocomplete options.
Any thoughts on how to do this?
Use YUI :)
Handles all that, completely customizable out of the box.
I'm not familiar with the autocomplete plugin but: Why not download all the data from the server and then only feed the autocomplete what it needs. I.e.
var persons = {
abe: {
name: 'abe',
birthplace: 'I\'m not from the US so I have no clue'
},
Obama: {
name: 'Obama',
birthplace: 'please see abe'
}
};
Then do something like:
for(name in persons){
feedAutocomplete(name); //or persons[name].name
}
Or if you need to feed the autocomplete in one Array:
autoCompleteArray = Array();
for(name in persons){
autoCompleteArray.push(name);
}
feedAutocomplete( autoCompleteArray );
And onAutoComplete callback:
function onAutoComplete(name){
//or if the currect value is not supplied in
// the function: var name = $('#autocompleField').val();
var personInfo = persons[name];
$('#hiddenFieldBirthplace').val( personInfo.birthplace );
}
I believe the auto-complete plug-in allows for callback functions. You could populate the hidden fields based on the users selection in that function.

Categories

Resources