🌊
jsf
  • About KalmiaJSF
  • Setup
  • Architecture
  • Contributing
  • Changelog
  • Guides
    • Cheat Sheet
  • Examples
    • Demo example
    • Basic examples
    • Kitchen Sink example
    • Charts example
  • Schema
    • Intro to Schema
    • Prop types
      • String
      • Boolean
      • Number & Integer
      • Object
      • Array
      • Date
      • Id
      • Null
      • Ref
      • Binary
    • Prop options
      • Disabling property
      • On prop init actions
      • Persist
      • On value change
      • On user value change
    • Handlers
      • Color picker
    • Creating custom handler
      • Working with arrays
    • Value provider
  • Validation
    • Custom validation
    • Eval
  • LAYOUT
    • Intro to Layout
    • Layout options
      • Show & hide
      • On click action
  • INTERFACES
    • Value Options
  • Form
    • Form data
  • OTHER
    • Events
    • Lifecycle hooks
    • Notifications support
  • PAGES & COMPONENTS
    • Page
    • Component
  • THEMING
    • Creating new theme variant
  • BUILDER
    • Shortcuts
  • Help
    • FAQ
Powered by GitBook
On this page

Was this helpful?

Export as PDF
  1. OTHER

Events

JSF form events can be split into two categories:

  • external - things that are emitted into JSF from outside world (app)

  • internal - things that are emitted from JSF to outside world (app)

You can listen on external events with schema.$events.listen keyword.

For JSF to listen to itself there is in JsfBuilder subject called onAnyEvent. This subject emits all external and internal events, like onClick emit. You can also emit custom events for you own usage.

Example usage in layout:

rootBuilder.onAnyEvent.subscribe(x => {
  if (x.type === 'internal') {
    const data = x.internalEvent; // type of JsfFormEventInterface
  }
})

You can also manually trigger any event call:

rootBuilder.onAnyEvent.next({ type: 'custom', customEvent: 123 });

Subject interface:

{
    type: 'internal' | 'external' | any,
    customEvent?: any;
    externalEvent?: { key: string, data: any },
    internalEvent?: JsfFormEventInterface
}
PreviousForm dataNextLifecycle hooks

Last updated 4 years ago

Was this helpful?