I want to used adf richtexteditor component and implement below two things :
A character counter [Number of character an user enters dynamically]
2.spell check
I am using 11.1.1.6 Jdev version.
You can use to hook javascript function call to events like keyPress, mouseClick. Some thing like:
<af:resource type="javascript">
function doSomething(){ }
</af:resource>
<af:richTextEditor>
<af:clientListener method="doSomething" type="keyPress"/>
</af:richTextEditor>
For more details visit: http://docs.oracle.com/cd/E24382_01/web.1112/e16181/af_arch.htm
Related
Coming from React, i am really confused. In pages/index.js, suppose I have a button with onClick listener, and clicking on that button will log "you clicked" in the console. How do i implement this? I want that page to be statically generated and also give that button some functionality.
The reason I am having a lot of trouble is because in React tutorials or even in my projects, if i needed some functionality i'd do this:
function handleClick() {
document.body.style.background = "black"
console.log("you clicked") //nothing is logged in console
}
export default function App() {
return(
<button onClick{() => handleClick}>Click Me</button>
)
}
I was gonna use this Next.js to see how state works. But I encountered a different problem. Unless I use inline function in onClick, it doesnt work. If I use a seperate handleClick function, the DOM doens't even show that I had an onclick event. I learned that's because Nextjs is rendered server side, so it doesnt have access to DOM and console etc. Then how do i do this?
I just transitioned from React, and in every tutorial, those guys would use handleClick func or whatever to handle events and stuff. But I couldnt find a solution to do this in Next, how does everyone handle this then? Because pages have interactive buttons right? Are those pages not statically generated then?
You forgot call function handleClick:
<button onClick{() => handleClick()}></button>
the same way you do it in react with your onClick function
Static generation pre-rendering does not change the interactivity of any page, check the following from Next.js documentation :
Each generated HTML is associated with minimal JavaScript code
necessary for that page. When a page is loaded by the browser, its
JavaScript code runs and makes the page fully interactive. (This
process is called hydration.)
https://nextjs.org/docs/basic-features/pages
I have two lightning web components and I have to navigate from one LWC to another LWC on button click.
I tried navigation service to apply the NavigationMixin function in the component’s base class to extends NavigationMixin(LightningElement). but it didn't work.
Can please anyone help me?
Thank you.
You can't (yet).
List of all interesting PageReference types says you're supposed to use standard__component but the target can't be pure LWC. At best it has to be hidden inside an Aura wrapper.
A Lightning component. To make an addressable Lightning web component,
embed it in an Aura component that implements the
lightning:isUrlAddressable interface.
It's a pain. I suspect that's also reason why we can't make quick actions with LWC yet, they'd have to be wrapped in Aura.
Click the link in the quote, it'll lead you to example how to pass parameters (/lightning/cmp/c__helloTarget?c__firstname=John)
I have had the similar issues . I have been trying to navigate to an LWC from another in a community and it looks like :
In communities, only comm__namedPage page-reference will work.
In Salesforce LWC app, you can navigate from one LWC component to another (which is on another tab/apppage) with the following code
myComponent.html
<a href="javascript:void(0);" tabindex="0" onclick={navigateNext}>Click Here</a>
myComponent.js
import { NavigationMixin } from 'lightning/navigation';
import { CurrentPageReference } from 'lightning/navigation';
export default class MyComponent extends NavigationMixin(LightningElement){
#wire(CurrentPageReference) pageRef;
#api tabName = "NextPage";
navigateNext() {
console.log("tabName = ", this.tabName)
this[NavigationMixin.Navigate]
({
type: 'standard__navItemPage',
attributes: {
apiName: this.tabName
}
});
}
}
Please replace the tabName variable with the apppage/tab name you are supposed to navigate.
That's it. You will be navigated to the tabName specified when you click the button in html
You can also go through the official documentation for more : https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_navigate_basic
In LWC Application, We can do it in either of the following ways:
1. Using Container Component
Create a parent LWC component that will be containing both the lwc components and showing one of the components at a time.
On clicking of the button, dispatch a custom event to navigate between the components.
On receiving the custom event in the container component, hide the visible component and show another.
2. Making use of LWC routes.
For information on lwc routes follow the below link.
http://lwc-router.com/#/quickstart
With react-color https://casesandberg.github.io/react-color/ .
I can use ready-made onChangeComplete function from react-color.
But I wonder how can I create that onChangeComplete by using input type color tag.
I tried onBlur but the color won't change until user clicks or presses tab
On the other hand, using onChange keep firing updates.
Because currently I'm using redux state, so dispatching update continuously when I drag and choose color isn't a good way.
Any ideas how to create onChangeComplete?
It depends on how you'd like to define a change. To prevent continuous updates every time the mouse moves, you'll probably want to update Redux state only when the mouse stops moving. (This seems to be the behaviour on the page you linked to).
You could use the following JavaScript to detect when the mouse stops moving:
let timer;
window.addEventListener('mousemove', function (e) {
console.log('Mouse moving');
clearTimeout(timer);
timer = setTimeout(() => console.log('Mouse stopped'), 300);
});
Then, try putting the above code inside your ComponentDidMount() method and replace console.log('Mouse stopped') with whatever Redux action you want to dispatch!
300 is the number of milliseconds without movement that will trigger the action, which could be changed depending on how sensitive you want your app to feel.
Lastly, remember to remove the event listener in your ComponentWillUnmount() method.
https://github.com/casesandberg/react-color/blob/7ee60d845e5d5e11e4f6ecb895b2d9755c59d09d/src/components/common/ColorWrap.js#L30
Here is the code that how react-color implemented onChangeComplete.
It is hard coded using debounce.
I put the link there for anyone interested in using that solution
I'm using a rich text editor called Froala, in its React version. The docs are intended for the JQuery one. From the little that is written about React, i found these instructions:
Events and Methods
Events can be passed in with the options, with a key events and object where the key is the event name and the value is the callback function.
options: {
placeholder: "Edit Me",
events : {
'froalaEditor.focus' : function(e, editor) {
console.log(editor.selection.get());
}
}
}
Using the editor instance from the arguments of the callback you can call editor methods as described in the method docs. Froala events are described in the events docs.
I understand how i can use events, but not calling methods. Does it mean that i can access the editor instance, only from an event? Can someone clarify this? For instance, i would like to use the html.insert() method, as described here:
$('.selector').froalaEditor('html.insert', 'foo bar', true);
How would that be used with the Froala React component?
In case anybody is interested, i implemented an easy workaround:
I use the "initialized" event, just to get the Froala instance, and place a reference to it in my class::
'froalaEditor.initialized' : (e, editor)=> {
this.froalaInstance = editor;
}
Now i can access the Froala instance...
If anyone is still interested in how to achieve this take a look at
https://froala.com/wysiwyg-editor/docs/framework-plugins/react/
It's pretty straight forward to define methods in the config object.
I'm running into a weird case that only seems to happen upon first loading a component on a heavily based component page (loading 30+ components).
#Component{
selector: <parent-component>
template: `<child-component [myObject]=myObject>
}
export class ParentComponent {
private myObject:DTOValue;
constructor(service:MyService){
service.getDTOValue().subscribe((dtoValue:DTOValue) => {
this.myObject = dtoValue;
});
}
}
#Component{
selector: <child-component>
template: `<div></div>
}
export class ChildComponent {
#Input set myObject(value:DTOValue) => {//do something};
constructor(){
}
}
In this code, the Parent is going to get a value to a child as an input. This value comes from a request at a later time, so when the child is first initialized, the input could be undefined. When the value does get returned from the request and is set on the variable myObject, I'd expect that the child component would receive an input event being triggered. However, due to the timing, it seems like this is not always the case, especially when I first load a page that contains a lot of files being loaded.
In the case that the child component doesn't receive the input, if I click else where on my page, it seems to now trigger the change detection and will get the input value.
The 2 possible solutions I can think of that would require some large code changes so I want to make sure I choose the right now before implement them.
Change the input to be an Subject, so that I push the input value which should ensure that a correct event is triggered(this seems like overkill).
Use the dynamic loader to load the component when the request as return with the correct value (also seems like overkill).
UPDATE:
Adding a plnker: http://plnkr.co/edit/1bUelmPFjwPDjUBDC4vb, you can see in here that the title seems to never get its data bindings applied.
Any suggestions would be appreciated.
Thanks!
If you can identify where the problem is and appropriate lifecycle hook where you could solve it, you can let Angular know using ChangeDetectorRef.
constructor(private _ref: ChangeDetectorRef)
method_where_changes_are_overlooked() {
do_something();
// tell angular to force change detection
this._ref.markForCheck();
}
I had a similar issue, only with router - it needed to do redirect when/if API server goes offline. I solved it by marking routerOnActivate() for check...
When you trigger change detection this way a "branch" of a component tree is marked for change detection, from this component to the app root. You can watch this talk by Victor Savkin about this subject...
Apologize, the issue ended up being my interaction with jQuery. When I triggered an event for a component to be loaded, inside of the jQuery code, it wouldn't trigger the life cycle. The fix was after the code was loaded to then call for a change detection.