I am trying to use the PeoplePicker control on Fluent UI:
https://developer.microsoft.com/en-us/fluentui#/controls/web/peoplepicker
How can I trigger an action when a selection is made? I don't see any onChange method or similar exposed in the API.
After looking at class inheritance on Fluent UI, I found out that the people picker was built on top of a "base picker".
The base picker page has more details on event handlers, including for example an "onItemSelected" method.
Related
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.
Looking to find where we can insert our own data for triggered events.
I have an extension that use to call onImpl(events, selector, data, callback), but that was back in 2.3.7. What is the updated way to add my event data if I want to pass data that can be used with the event?
As far as I know, it is not possible to pass data to core events anymore. But you can do it when you emit the events programmatically.
I'm assuming this is the extension that you mentioned. If you just want the paz/zoom functionality, you can use the pan-zoom extension.
I'm not sure if a toolbar extension would be any useful. The customization of the toolbar with an extension would be very limited. You can create a fancy toolbar, style and position it as you like and connect the buttons with Cytoscape events with jQuery or other similar libraries.
P.S: instead of passing the data to the event, you may keep the data in a global variable and access it from callback function.
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.
What is the difference between the two, and when is it appropriate to use each? I've seen the documentation but haven't quite been able to work it out.
Both events are part of the Durandal Lifecyle callbacks.
activate() Allows the new object to execute custom activation logic. (View Model)
viewAttached() Notifies the new object when its view is attached to its parent DOM node. (Composition).
See http://durandaljs.com/documentation/Hooking-Lifecycle-Callbacks/ for in depth comparision.
Update based on comment
In Durandal 2.x viewAttached() has become attached(). Also the documentation is now here http://durandaljs.com/documentation/Hooking-Lifecycle-Callbacks.html
Rainer is correct, but to expand on that.
activate is a method that is called before data-binding occurs, to ensure the viewmodel is in a stable state and can be safely data-bound to.
viewAttached is a callback to notify that data-binding has completed, and the DOM can safely be interacted with.
The current version of durandal doesn't have a viewAttached callback, it is simply attached now.
Durandal Lifecycle callbacks
I have a usercontrol that i want to use throughout my Silverlight MEF MVVM solution.
I want to be able to link it up with one of a number of ViewModels depending on which module i am in. What this control does is list the records of a given entity so i can Add, Edit or Delete. I realized i would be using this control in multiple locations - to update several lookup tables, so i decided to make it's ViewModel dynamic. As seen below, I am using the Galasoft MVVM plugin.
if (!GalaSoft.MvvmLight.ViewModelBase.IsInDesignModeStatic)
{
// set DataContext
DataContext = PluginCatalogService.Instance.FindSharedPlugin(ViewModelTypes.ViewModelMT, PluginType.ViewModel);
_viewModel = (ViewModelMT)DataContext;
}
My question is how can i dynamically change from ViewModelMT to ViewModelCT to allow me to independently display lookup tables e.g. Maintenance Types and Contract Types on an instance of this same usercontrol? I took a look at the Viewmodel locator, but I'm still not sure how to get this done.
Thank you
I don't think this is really a ViewModel thing. It's more of a Service problem.
Your ViewModel for the control will not change but you'll dynamically slot in the required service to maintain your list. ie. MaintenanceTypeService and ContractTypesService will implement IListMaintenanceService which exposes an list of items and Add,Delete and Edit commands.