I am using PrimeNG Multiselect in a reactive Angular form.
I can see the array of values coming back from the server through the chrome dev tool, but I cant figure out how to get it to bind to the multi select.
module is imported in the component and the app module:
import { MultiSelectModule } from 'primeng/multiselect';
template:
<p-multiSelect [options]="activities" [optionLabel]="ActivityName" [panelStyle]="{minWidth: '300px'}" [showHeader]="true" formControlName="selectedActivities"></p-multiSelect>
Class:
export class ChemicalEditComponent implements OnInit {
activities: ActivityType[];
selectedActivities: ActivityType[];
constructor(
private _chemicalService: ChemicalService,
private fb: FormBuilder
) {
this.getActivities();
this.getSelectedActivities();
this.createForm();
}
ngOnInit() {
this.getChemical();
}
getActivities(): void {
this._chemicalService.getActivities().subscribe(result => this.activities = result);
}
getSelectedActivities(): void {
this._chemicalService.getActivitiesByChemical(this.chemicalId).subscribe(result => this.selectedActivities = result);
}
createForm() {
this.chemicalForm = this.fb.group({
brandName: '',
commonName: '',
formulation: '',
selectedActivities: ''
});
}
rebuildForm() {
this.chemicalForm.reset({
brandName: this.chemical.BrandName,
commonName: this.chemical.CommonName,
formulation: this.chemical.Formulation,
selectedActivities: this.selectedActivities
});
}
The json returned from the server looks like this:
0:{ActivityTypeId: 61, ActivityName: "Driving"}
1:{ActivityTypeId: 62, ActivityName: "Strolling"}
I'm seeing all the examples use "label" and "value" but mine is typed from the server. I'm assuming the problem is I need to specify what is the label & value, so I added the [optionLabel] tag but that didnt help.
Related
I need to open the new navigation tab in navigation bar in Lightning Experience in Non Console App environment.Tab should have record name pre-populated as label.
Tried following approach:
Created custom tab for target lightning component
In Source Component:
Created Page Reference with type as standard__navItemPage.
for attributes specified custom tab name for target component.
Using navigation service redirected the control to new URL.
In Target Component:
Using interface isUrlAddressable to retrieve the page param.
var pageReference = {
type: 'standard__navItemPage',
attributes: {
apiName: 'Product_Overview',
},
state: {
c__productId: itemId,
c__isfavourite : isfavourite,
c__isSourceSearchResultCmp : false
}
};
var navService = component.find("navService");
navService.generateUrl(pageReference)
.then($A.getCallback(function(url) {
console.log('Using Navigate'+url);
navService.navigate(pageReference);
}), $A.getCallback(function(error) {
console.log(error);
}));
The issue is , the navigation tab which is getting open is not having details like record name and I could not find any API or methods the same.
Any guidance here would be appreciated.
var pageReference = {
type: 'standard__navItemPage',
attributes: {
apiName: 'Product_Overview',
},
state: {
c__productId: itemId,
c__isfavourite : isfavourite,
c__isSourceSearchResultCmp : false
}};
var navService = component.find("navService");
navService.generateUrl(pageReference).then($A.getCallback(function(url) {
console.log('Using Navigate'+url);
//---add this line which allows you to open url in new tab instead of navService
window.open('https:'+url,
'_blank' // <- This is what makes it open in a new window.
);
}),$A.getCallback(function(error) {
console.log(error);
}));
navigateToRecord(event) {
this[NavigationMixin.GenerateUrl]({
type: 'standard__recordPage',
attributes: {
recordId: event.target.name,
objectApiName: 'Product2',
actionName: 'view',
},
}).then((url) => {
window.open(url);
});
}
If you encounter any issue, please let me know.
I've got an ExtJs ViewModel where I try to use fomulas. The following code is working as expected:
viewModel: {
formulas: {
isPressed: function (get) {
return get('state.attribute');
}
}
}
The debugger pauses two times in this formula. Once when opening the view and once when the state and property is initialized.
But if I try this:
viewModel: {
formulas: {
isPressed: function (get) {
var x = 'state.attribute';
return get(x);
}
}
}
The debugger only stops when opening the view but not the second time, when everything is initialized.
Edit
I tried to do the following. In my component I've got this config:
config: {
target: null
}
target contains a string like 'state.property' from my parent view which contains the component. Now in this component I want a binding to the value of target but don't want to write:
formulas: {
isPressed: {
bind: '{state.property'},
get: function(property) { ... }
}
}
because the value to bind to should be dynamic. I want to reuse the component in different places. So I tried this, but didn't work:
viewModel: {
formulas: {
isPressed: function (get) {
return get(this.getView().getTarget());
}
}
}
The reason this occurs is because it parses the contents of the function to figure out the dependencies. However it only uses a really naive parser, so things like you described won't be picked up. You can explicitly specify dependencies using bindTo:
const viewModel = new Ext.app.ViewModel({
formulas: {
isNameModified: {
bind: {
bindTo: '{theUser}',
deep: true
},
get: user => user.foo
}
},
data: {
theUser: {
foo: 1
}
}
});
Using React with TypeScript
Please could somebody provide an example of how I might be able to use a Kendo DataSource to read from a method which internally uses Axios to prod an external API for JSON data..? I must have flown through 20 different versions of this code trying different approaches, nothing seems to fit...
All I'm trying to do currently is supply a Kendo ComboBox with an array of {id: number, name: string}
Very basic stuff at the moment, but I do have to use a similar approach to this later on with a Kendo Grid which handles server side sorting and pagination so I'd like to get this working now then that should be somewhat easier later on...
The reason I want to use Axios is because I've written an api.ts file that appends appropriate headers on the gets and posts etc and also handles the errors nicely (i.e. when the auth is declined etc...)
A basic example of what I'm trying, which isn't working is this: -
public dataSource: any;
constructor(props: {}) {
super(props);
this.dataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: function() {
return [{ id: 1, name: "Blah" }, { id: 2, name: "Thing" }];
}.bind(this)
},
schema: {
model: {
fields: {
id: { type: "number" },
name: { type: "string" }
}
}
}
});
}
<ComboBox
name="test"
dataSource={this.dataSource}
placeholder={this.placeholder}
dataValueField="id"
dataTextField="name"
/>
Anybody got any thoughts on this please? :)
Easy fix in the end...
this.dataSource = new kendo.data.DataSource({
transport: {
read: function(options: any) {
options.success([{ id: 1, name: "Blah" }, { id: 2, name: "Thing" }]);
}.bind(this)
},
schema: {
model: {
fields: {
id: { type: "number" },
name: { type: "string" }
}
}
}
});
2 things were wrong..
Removed the type: "odata",
and
Added the usage of options in
All working fine now with the async await function also, just passing the data into the options.success in the .then on the promise. Job done :-)
I am still trying to learn what seems to me like advanced Angular 5. The below code does enter the "id" number from the array into the url as expected, but when I go to model/1 it shows my all the objects from the array. I need to only see the object under id 1 and same for each object in the array. I have found so much conflicting information online, from mapping to queries that I'm not even sure where to being and everything I've tried has led to no better results. I have included all the code I'm working with.
I have an array of objects in my json file-
[
{
"id": 1,
"label": "Metal Man",
"sample": "/assets/img/metalman1.png",
"fab": "https://sketchfab.com/models/1b3cb7f8a77145bc8616075e9036b025/embed",
"img1": "/assets/img/metalman1.png",
"img2": "/assets/img/metalman2.png",
"img3": "/assets/img/metalman3.png"
},
{
"id": 2,
"label": "Magrot",
"sample": "/assets/img/magrot1.png",
"fab": "https://sketchfab.com/models/e20c8ade2f16452ca7f440aa84fc8e33/embed",
"img1": "/assets/img/magrot1.png",
"img2": "/assets/img/magrot2.png",
"img3": "/assets/img/magrot3.png"
},
{
"id": 3,
"label": "Baseball and Bat",
"sample": "/assets/img/ball1.png",
"fab": "https://sketchfab.com/models/781c60d3449b46f996a081ae36c20cce/embed",
"img1": "/assets/img/ball1.png",
"img2": "/assets/img/ball2.png",
"img3": "/assets/img/ball3.png"
}
]
My template for each of the above objects-
<div class="columnFlex mainBlock" *ngFor="let model of modelwork">
<div class="modelImagery">
<h1>{{ model.label }}</h1>
<iframe [src]='sanitizer.bypassSecurityTrustResourceUrl(model.fab)'
frameborder="1" allowvr allowfullscreen mozallowfullscreen="true"
webkitallowfullscreen="true" onmousewheel=""></iframe>
<img [src]="model.img1" />
<img [src]="model.img2" />
<img [src]="model.img3" />
</div></div>
And my Activatedroute set up-
import { Component, OnInit } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { CommonModule } from '#angular/common';
import { DomSanitizer } from '#angular/platform-browser';
import { ActivatedRoute } from '#angular/router';
import { Router } from '#angular/router';
#Component({
selector: 'app-model',
templateUrl: './model.component.html',
styleUrls: ['./model.component.css']
})
export class ModelComponent implements OnInit {
modelwork: any;
constructor( private route: ActivatedRoute, private router: Router, private http: HttpClient, public sanitizer: DomSanitizer ) {
this.sanitizer = sanitizer;
this.route.params.subscribe(params => {this.modelwork = params['id'];});
}
ngOnInit(): void {
this.http.get<any>('./assets/models.json').subscribe(
data => {
this.modelwork = data;
})
}
}
Any clarification on what I'm needing to do would be so appreciated! I'm trying to learn Angular in days and it is more complicated than I had expected. Thank you for taking the time to look at this!
I don't see anything advanced here. You simple have two asynchronous operations that both set the variable 'modelwork'. One of the operations sets modelwork to an integer and the other sets it to a json array. depending on which operation resolves first.
Edit
Looking at your comment, i see what you want to do. Here's an example:
chosenIndex: any;
modelwork: any;
constructor( private route: ActivatedRoute, private router: Router, private http: HttpClient, public sanitizer: DomSanitizer ) {
this.sanitizer = sanitizer;
}
ngOnInit(): void {
this.route.params.subscribe(params => {
this.chosenIndex = params['id'];
this.http.get<any>('./assets/models.json').subscribe(data => {
this.modelwork = data.filter(d => d['id'] == this.chosenIndex);
})
});
}
Modelwork will now contain an array of 1 object. The one object you want. You can alter this example to get whatever output you want.
I am trying to integrate CKEditor in Angular App. In CKEditor, I am trying to use uploadimage. In run method of my app I have written following code to listen the events of CKEditor.
CKEDITOR.on( 'instanceCreated', function( event ) {
console.log("CKEditor instance created");
});
CKEDITOR.on( 'fileUploadResponse', function( evt ) {
// Prevent the default response handler.
console.log("Image Uploaded");
evt.stop();
// Ger XHR and response.
var data = evt.data,
xhr = data.fileLoader.xhr,
response = xhr.responseText.split( '|' );
if ( response[ 1 ] ) {
// Error occurred during upload.
data.message = response[ 1 ];
evt.cancel();
} else {
data.url = response[ 0 ];
}
console.log("Image Uploaded");
} );
In console it is printing CKEditor instance created, but not printing Image Uploaded. Somehow it is not listening to fileUploadResponse event.
My config file of CKEditor is as follow:
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
config.extraPlugins = 'uploadimage';
config.uploadUrl = '/notice/fileupload';
};
Everything is working fine and my image file is also uploading successfully and I am getting following JSON response:
{
"uploaded": 1,
"fileName": "checkout.PNG",
"url": "/img/syllabus/checkout.PNG",
"error": null
}
But fileUploadResponse is not firing after so many tries. I am not sure which part I am missing.
I think the 'fileUploadResponse'-Event has to be registered on the ckeditor-instance and not on CKEDITOR itself.
var editor = $( 'textarea#editor1' ).ckeditor();
editor.on( 'fileUploadResponse', function( evt ) {...});
Thanks, #Benjamin Schüller for pointing in the right direction.
I am using ng-ckeditor library for CKEditor Textarea along with ng-model data. This library has the directive in which they are initiating the CKEditor instance. All I needed is to get that instance and register fileUploadResponse event to it.
Following is my textarea in template html:
<textarea id="noticeDetails" ckeditor="editorOptions" name="description" ng-model="ctrl.notice.description" ></textarea>
And in my Angular Controller, I am defining editorOptions and binding fileUploadResponse:
$scope.editorOptions = {
language: 'en',
allowedContent: true,
entities: false
};
$scope.$on("ckeditor.ready", function( event ) {
var noticeCkEditor = CKEDITOR.instances["noticeDetails"];
noticeCkEditor.on( 'fileUploadResponse', function( evt ) {
// Prevent the default response handler.
evt.stop();
// Get XHR and response.
var data = evt.data,
xhr = data.fileLoader.xhr,
response = xhr.responseText;
var respJson = angular.fromJson(response);
console.log(respJson);
if ( respJson.error ) {
// Error occurred during upload.
data.message = respJson.error.message;
evt.cancel();
} else {
data.url = respJson.url;
}
} );
});
Following is my JSON response on file upload:
{
"uploaded": 1,
"fileName": "IMG_1202.PNG",
"url": "/img/society/notice/IMG_1202.PNG",
"error": null
}
Few things to note here:
You can get an instance after CKEditor completely initialized. ng-ckeditor has broadcast called ckeditor.ready. So on ckeditor.ready you can get an instance and bind events specific to the editor.
CKEditor gives name to the instance using id of the textarea. In my case id is noticeDetails, so it will create an instance with name noticeDetails. In case you have not given the id then it will create the instance with names editor1, editor2 and so on. In my case, I am getting the CKEditor instance with noticeDetails name.
CKEditor documentation has mentioned example code to handle file upload response manually. But it is not working. They are binding whole JSON string to data.message or data.url which is not the way to do as per my experiment. What we need to do is create the JSON object from the response string and appropriately get the message or URL from that JSON object and bind it with data object as shown in the above code.