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.
Related
In a ReactJS app, in the root.tsx, push an event "website_pageview" with pageInfo
window.dataLayer.push({
event: "website_pageview",
pageInfo: {
path: window.location,
title: window.document.title,
}
});
In another route file blog.tsx which contains tags and authors, how can I push more key-value to the existing pageInfo in the same event: "website_pageview"?
I tried the following
window.dataLayer[0].push({
pageInfo: {
tags: {categoryList},
author: {authorList}
}
});
But it will return 2 entries as following when console.log `window.dataLayer``
(2)[
{
pageInfo: {
tags: "Tag1, Tag2",
authors: "Author1, Author2",
}
},
{
event: "website_pageview",
pageInfo: {
path: "https://google.com",
title: "Page title",
}
}
]
What I want to achieve is the following. In GTM, based on the event: "website_pageview" it will trigger a pageview with all the needed info - path, title, tags, authors.
(1)[
{
event: "website_pageview",
pageInfo: {
path: "https://google.com",
title: "Page title",
tags: "Tag1, Tag2",
authors: "Author1, Author2",
}
}
]
Thank you in advance.
I think it's okay that it's not in the same dataLayer array. Because in Google Tag Manager, it will combine it automatically in the Datalayer Variable
Here is the test result from you dataLayer :
I paste the dataLayer code in the console.
Create the Datalayer Variable in Google Tag Manager
We can see that the test-Pageinfo variable already merge all the parameters!
Hello i am creating a panel window and i want to save data after fill valid id.
if id does not exits then i show a panel window and here will be create a valid id. After create valid id user will close window. After close window i have need to form on server.
I am also attaching code and screenshot
// check id exist on database or not
var myId= me.lookupReference('myId').getValue();
Ext.Ajax.request({
url: './MyController/CheckExistId',
method: 'POSt',
params: {
myId: myId
},
success: function (response) {
var result = Ext.JSON.decode(response.responseText);
if (result.success === true && result.data !== null) {
if (result.data === 0) {
Ext.create('MySample.view.register', { id: myId }).show();
}
else {
me.submitData();
}
}
}
Window screenshot for create new id
after close window i want to submit form automatically by using me.submitData() function
Add a listener to MySample.view.register like:
Ext.create('MySample.view.register', {
id: myId,
closeAction : 'destroy',
listeners: {
// catch the close action
'destroy' : function() {
me.submitData();
}
}).show();
The event to catch is based on which kind of component MySample.view.register is extending of.
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.
I have a module like
function config(msNavigationServiceProvider)
{
// Navigation
msNavigationServiceProvider.saveItem('apps', {
title : 'APPS',
group : true,
weight: 1
});
msNavigationServiceProvider.saveItem('apps.dashboards', {
title : 'Dashboards',
icon : 'icon-tile-four',
weight: 1
});
}
Where msNavigationServiceProvider is provider which is part of core package.
The problem is that I want to hide Apps Item on Navigation bar accoding to the value in localstorage but I cannot access $localStorage in config() provider error. I have research about it found that it is not possible.
So what should I do to hide item from Navigation . I dont want touch the core packages but I also cannot use localstorage in my code.
Any help would be appreciated
You can use the hidden attribute in the msNavigationService
hidden: function ()
{
return boolean; // must be a boolean value
}
Example:
// Apps.Dashboards
msNavigationService.saveItem('apps.dashboards', {
title : 'Dashboards',
icon : 'icon-tile-four',
class : 'navigation-dashboards',
hidden: function ()
{
return AuthService.isAdmin; // must be a boolean value
},
weight: 1
});
The following screenshot shows a combined form for sign-in and sign-up:
The following module is used to render the AuthView:
MyApp.module("User", function(User, App, Backbone, Marionette, $, _) {
User.AuthView = Marionette.ItemView.extend({
className: "reveal-modal",
template: "user/auth",
ui: {
signInForm: "#signin-form",
signUpForm: "#signup-form"
},
events: {
"focus input": "onFocus"
},
onFocus: function() {
console.log("Some input field has received focus.");
},
onRender: function() {
this.signInForm = new Backbone.Form({
schema: {
signInEmail: {
type: "Text",
title: "E-Mail address"
},
signInPassword: {
type: "Password",
title: "Password"
}
}
}).render();
this.ui.signInForm.prepend(this.signInForm.el);
this.signUpForm = new Backbone.Form({
schema: {
signUpEmail: {
type: "Text",
title: "E-Mail address"
},
signUpPassword: {
type: "Password",
title: "Password"
},
signUpPasswordConfirmation: {
type: "Password",
title: "Password confirmation"
}
}
}).render();
this.ui.signUpForm.prepend(this.signUpForm.el);
}
});
});
How can I automatically focus the first field in each sub-form whenever it is rendered? The first fields would be signInEmail for the signInForm and signUpEmail for the signUpForm.
I tried to listen to focus input events. Such an event is triggered when I click into one of the input fields, not before.
Meanwhile, inspired by the current answers I came up with the following helper function:
focusFirstFormField: function(form) {
if (_.isUndefined(form)) {
throw "IllegalStateException: Form is undefined."
}
// TODO: AuthView does not focus first sign-in field.
var firstInput = form.find(':input:first');
if (_.isObject(firstInput)) {
if (firstInput.length > 0) {
firstInput = firstInput[0];
}
else {
throw "IllegalStateException: Form find returns an empty jQuery object."
}
}
_.defer(function() {
firstInput.focus();
});
}
There is still need for improvement, though.
The events object are DOM events which are generally triggered by the user so that's not what you'll likely want to use in this case.
If I'm understanding you correctly you would like to put the focus in the first input of each of the forms but since you can only have focus on one thing at a time and they are rendering together you'll have to choose one or the other.
The simplest option is to add another line at the end of onRender focusing on the input. If your input is generating an input something like this:
<input type="text" name="signInEmail">
Then you can add:
this.$('[name=signInEmail]').focus();
If not you'll have to change the selector this.$(xxxx).focus() to suit.
You can use onDomRefresh event of the view. It will be triggered after view rendered and Dom refreshed.
onDomRefresh: function() {
this.focusFirstInput();
};
focusFirstInput: function() {
this.$(':input:visible:enabled:first').focus();
};
This solution applies to general cases. However, pay attention if you are using Bootstrap. I can't get this work there. Instead, I set autofocus: 'autofocus' in the field and it works.
You can add it to onRender method.
this.ui.signInForm.find('input[type=text]:first').focus();
this.ui.signUpForm.find('input[type=text]:first').focus();
On the onRender method I do :
$(this.el).find(':input[autofocus]').focus();
And I add the autofocus="" flag onto my HTML node. This works for refresh.