How to update components in Pentaho CDE? - pentaho

I'm trying to refresh components in Pentaho CDE using a button. How can I do that?
Solution:
Finally, I created a button with an event click and a generic component like a parameter. The components that I wanted to refresh, I added them a listener with my custom parameter.
On the event click of the button, it calls the funciĆ³n:
Dashboard.fireChanges ("myparam", "*");
All the components that I needed was refreshed!

Use below function
function updateAllDashboardComponents() {
Dashboards.updateAll(Dashboards.components);
}

If it's helpful to update a specific component with name nameOfTheComponent and not all of them you can do something like this:
var component = dashboard.getComponent('render_nameOfTheComponent');
dashboard.update(component);

Related

Pass Click Event to two components up Vuejs

how could a pass a click event from one component to two parents up.
I have a form with a bottom clear, this form component is in a file filterForm
the filterform component is called in another file called TableView and the tableView component is called in a file called Admin
I want to execute a function inside admin when the button clear is clicked
the button is in the file filterForm
the filterForm is used in TableView
and tableView is used in Admin
this is the function I want to call from Admin to test
I understand that I have to make a click event from fileForm and emit that event to Tableview, but the function is on Admin that contains all the data and methods.
Thanks for your help!
Based on $emit event in Vue.js: https://vuejs.org/guide/components/events.html
When you emit an event like this: $emit('someEvent'), the parent someEvent function will fire (and also you can pass some parameters).
Passing a data or emitting a function so that two parents up listens to your event and get the data will need some chaining.
Fire the event on 1st component and get it in 2nd component and then fire the event in 2nd component to get it in 3rd.
Edit: one of the best practices is to use Vuex(Pinia) as a state management tool to pass or get data in an easier and cleaner way.

How to submit / save form from within the Edit form

I would like to submit the <Edit> form from within the form itself, in order to instantly save the form state upon a simple change e.g. a boolean toggle.
I spent hours trying to find a simple way, and it doesnt seem to exist. The handleSubmit[...] function is only passed to the actions toolbar, and not to the input themselves.
In addition, there seems to be no context hook I can invoke that would provide me access to that function.
One solution I can think of is create a hidden <SaveButton /> inside the actions props, with a ref. Then from the input, I can trigger the <SaveButton /> from the Input. However this seems super hacky, and I would love to find a more straightforward solution.
Is there a theoretical reason why inputs cannot access the submit function?
You can use the useSaveContext hook which is not yet documented:
import { useSaveContext } from 'react-admin';
const { save, saving } = useSaveContext();

Does OutletService support dynamically adding component in button handler

i used this.outletService.add('BottomHeaderSlot', factory, OutletPosition.BEFORE); during the search button click handler to add a custom component in the BottomHeaderSlot. I intended to add searchOverlay under the header to add customized search behavior.
But my custom component is not shown under the header after calling outletService.add. I refered to this https://sap.github.io/cloud-commerce-spartacus-storefront-docs/outlets/ . Does outletService support dynamic adding component during runtime?
Following is my button handler
open(): void {
const factory = this.componentFactoryResolver.resolveComponentFactory<SearchOverlayComponent>(SearchOverlayComponent);
this.outletService.add('BottomHeaderSlot', <any>factory, OutletPosition.BEFORE);
this.cd.markForCheck();
That's a good question. At the moment it is a not a feature supported from our outlets.
A solution you could do is inject the component in a more static manner (either CMS or outlet when the app initializes like seen here https://github.com/SAP/cloud-commerce-spartacus-storefront/blob/develop/projects/storefrontlib/src/cms-components/asm/services/asm-enabler.service.ts)?
Your component could then be wrapped with an <ng-container *ngIf="open$ | async></ng-container> where open$ is an observable for the state of the search box. That way the component only appears in the dom when the searchbox is open.
The idea of dynamically adding a components through outlets is a good one we will keep in mind. I will open an issue on Github as an improvement.

How to override v-on:click in vue for logging purposes

Looking to implement some logging with the purpose of generating some usage statistics for a web application written with Vue.
I want to avoid writing an explicit 'log' statement within or with every 'on click' callback.
Is it possible to wrap/override the v-on:click directive to first perform logging, then execute the callback?
As far as I know it is not possible to do it for all v-on:clicks at the same time. As the event handlers are connected to the specific elements you would need to do it for every element separately.
Instead you can add an eventlistener for click events like this:
window.addEventListener('click', e => console.log(e))
or like this
document.onclick = e => console.log(e)
Note that this will log every single click, even if it's not on an element with v-on. The event here gives you the source element that was clicked, that you might be able to use to define if the click is relevant for your logging or not.
This previous post could work for you:
Extend vueJs directive v-on:click
A wrapper component for you click event elements.

Communicating with Knockout components

Is there a way to communicate from the parent viewmodel to a KnockoutJS component?
I have a component that contains a bootstrap modal dialog box, to search for customers and return a selected customer. At present, to make the dialog box appear, I pass an observable boolean from the viewmodel in the component's params attribute. To make the dialog appear I set this to true, which invokes the dialog box. I also pass a callback function in params to return the results.
Here is a fiddle demo which shows the concept: http://jsfiddle.net/Quango/5bxbsLt6/
Passing the observable boolean to invoke the dialog doesn't feel right, but it's the only working solution I have. The only other idea I had was to use ko-postbox to create a publish/subscribe function.
It feels like there should be a way to invoke actions, e.g. component.Show() ?
I think the answer here is that there isn't a better way. To communicate from a parent viewmodel to the component, pass an observable value, and then use that directly or subscribe to changes in the component.
I will put a suggestion on the Knockout github project to consider some form of interface.