The Angular Material CDK library provides various features including overlays. All the examples I can find show how to display a new component on top of the overlay. My goal is a little different. I want to display an existing component (one of several on the screen) on top of the overlay.
The behavior I have in mind is that when the user goes into a kind of editing mode on a particular object, the component representing that object would sort of "float" on top of an overlay, until editing is done or cancelled.
Is there any straightforward way to do that? It seems that the cdkConnectedOverlay directive might be useful, but I can't figure out how to make it work.
Angular CDK Provides you two ways to achieve that (Directives and Services).
Using the Overlay service you will need to call the create method passing the positionStrategy prop:
#Component({
....
})
class AppComponent {
#ViewChild('button') buttonRef: ElementREf;
...
ngOnInit() {
const overlayRef = overlay.create({
positionStrategy: getOverlayPosition(),
height: '400px',
width: '600px',
});
const userProfilePortal = new ComponentPortal(UserProfile);
overlayRef.attach(userProfilePortal);
}
getOverlayPosition(): PositionStrategy {
this.overlayPosition = this.overlay.position()
.connectedTo(
this.buttonRef,
{originX: 'start', originY: 'bottom'},
{overlayX: 'start', overlayY: 'top'}
)
return this.overlayPosition;
}
...
}
I made an example to show you how to use the CDK overlays services and classes.
Overlay demo
If you prefer the directive way Look at this medium article and check the examples applying the directive way:
Material CDK Overlay with RxJS
Related
I'm looking for a little guidance and suggestions here. My attempts and theories will be at the bottom.
I have a NextJS project from which I want to export the top level component (essentially the entry file) so that I can use it as a preview in my dashboard.
The nextjs project is very simple. For the sake of simplicity, let's imagine that all it renders is a colored <h1>Hello world</h1>. Then in my dashboard, I want to render a cellphone with my NextJS component embedded and then from the dashboard change the color of the text, as a way to preview how it would look like. I hope this makes sense.
I'm lost at how I could export this component from NextJS and import it into my dashboard. The dashboard is rendered in Ruby on Rails. It would be simple enough to just import the repo from git and access the file directly form node_modules, but I'm looking for a solution that doesn't require installing npm on our Rails project.
Paths I have thought about:
1 - Install npm on Rails and just import the source code from NextJS repo and access the file and render with react (Simple, but we're looking for a non-npm solution)
2 - Bundle the component with webpack and load it directly into rails (does this even work?) - I exported the js and all it did was freeze everything :P Still trying this path for now
3 - Using an iframe and just accessing the page (then I can't pass any callbacks into the iframe to change the color directly from the dashboard)
4 - I cannot separate this component from NextJS to use as a library in both repos. The component we are exporting is the "ENTIRE" NextJS app jsx and it wouldn't make sense to separate in a different repo
Does anyone have a suggestion on how I could achieve this?
I think you could use an iframe with the nextjs app url. Then if you want to change the color, simply add the color in query parameter of the iframe and handle it on nextjs app.
Simple example
Rails view (erb)
<iframe src="#{#nextjs_url}?color=#{#color}" />
NextJS
# do something to get the query param of the page and and set to prop of the component
const YourComponent = ({color}) => {
return <h1 style={{color}}>Lorem</h1>;
}
While trying Hoang's solution, I decided to dive deeper into how to communicate with an iframe and the solution actually feels quite good.
You can set up listeners on either side and post messages in between the projects.
So in my dashboard:
function handleEvent(e) {
const data = JSON.parse(e.data)
if (data.type === "card_click") {
//if type is what we want from this event, handle it
}
}
// Setup a listener with a handler
// This will run every time a message is posted from my app
window.addEventListener("message", handleEvent, false)
const postMessage = (color) => {
const event = JSON.stringify({
type: "color_update",
color,
})
// Find the iframe and post a message to it
// This will be picked up by the listener on the other side
document.getElementById("my-iframe-id").contentWindow.postMessage(event, "*")
}
And on my app:
function handleEvent(e) {
const data = JSON.parse(e.data)
if (data.type === "color_update") {
// Do whatever is necessary with the data
}
}
// Setup listener
// This will fire with every message posted from my dashboard
window.addEventListener("message", handleEvent, false)
const handleCardClick = (cardIndex) => {
const event = JSON.stringify({
type: "card_click",
cardIndex,
})
// post message to parent, that will be picked up by listener
// on the other side
window.parent.postMessage(event, "*")
}
It feels pretty straight forward to communicate with an iframe with this solution.
In my NativeScript (Angular) App i use a RadListView to create a list and each element has many different informations to display. It looks like that
Because of many hints at Stackoverflow and other sources i reduced the amount of nested layouts (StackLayout, GridLayout, ...) as much as possible to make the RadListView faster. On Android is the performance by using the list much better as on iOS. With an iPad Pro (2020) the rendering of the list at scrolling is not smooth. If the user change the orientation of the device the screen is freezing and have black bars at the side or bottom for a moment. The time of the freezing depends on the amount of elements to display in each row. The same row layout in a ListView is much faster but not the same as native (SwiftUI) and with missing features like swipe and pull to refresh.
Sorry for the lyric but i think a little background explains why i try the next step.
To improve the user experience i make a tiny native test app with SwiftUI and nearly the same row layout. The feeling is much better, fast first loading, smooth scrolling and no delay by orientation changes. My next idea is to create a native component in SwiftUI to show/render each row of the RadListView if possible
<RadListView [items]="items">
<ListViewLinearLayout tkListViewLayout></ListViewLinearLayout>
<ng-template tkListItemTemplate let-item="item" let-i="index" let-odd="odd">
<MyNativeSwiftUIComponentElement data="item.rowData"></MyNativeSwiftUIComponentElement>
</ng-template>
</RadListView>
or use the List from SwiftUI to show/render the whole list
<ActionBar title="Objects"></ActionBar>
<MyNativeSwiftUIListComponent data="items"></MyNativeSwiftUIListComponent>
Looking for docs and examples was difficult. I found this very short advise Adding Objective-C/Swift code and the linked tutorial there for Objective-C (Adding Objective-C Code to a NativeScript App) and some questions on Stackoverflow but there all about classes and not SwiftUI (with struct and views). One question was about SwiftUI: Is it possible to display a View written with SwiftUI with NativeScript the answer was unfortunately not helpful for me (btw. thank you #Manoj for your great support for NativeScript at Stackoverflow!).
How can i use a SwiftUI View as native component in my {N}app?
Have anyone a hint, a link to a tutorial or a link to a public repository for a app/plugin? Every tiny tip is welcome.
You might be able to use Nativescript's placeholder component (more info on that here
So you would have the Placeholder tag on your template, and use the creatingView event to add the native UIs
<Placeholder creatingView="creatingView"/>
import { CreateViewEventData } from "#nativescript/core";
export function creatingView(args: CreateViewEventData) {
let nativeView = new UILabel(); // where this would be your native UI
nativeView.text = "Native";
args.view = nativeView;
}
After a while i give up with my attempts to use directly SwiftUI in the project ({N}+Angular) and instead i try the <Placeholder> component which #William-Juan suggested. But it looks like, that the <Placeholder> not official supported in the Angular flavor - see github issue #283
To move on, i looked at the samples for NativeScript plugins and build a working solution. If anybody interested the full sample source code are in this repository: https://github.com/teha-at/sample-nativescript-native-ui-component
First, create a class which extends the #nativescript/core/View class and has an item to get the data which will be to display.
// object-list-item.d.ts
// [...]
export class ObjectListItem extends View {
item: ObjectModel;
}
export const itemProperty: Property<ObjectListItem, string>;
Than create a abstract base class which also extends the #nativescript/core/View class and this creates the base for Android and iOS
// object-list-item.common.ts
// [...]
export const itemProperty = new Property<ObjectListItemBase, string>({
name: 'item',
defaultValue: null,
affectsLayout: isIOS,
});
export abstract class ObjectListItemBase extends View {
item: PortalObjectModel;
}
// defines 'item' property on the ObjectListItemBase class
itemProperty.register(ObjectListItemBase);
ObjectListItemBase.prototype.recycleNativeView = 'auto';
Because i was only looking for a component for iOS the object-list-item.android.ts are very simple:
// object-list-item.android.ts
import { ObjectListItemBase } from './object-list-item.common';
export class ObjectListItem extends ObjectListItemBase {}
For iOS there are much more lines, for the complete file content look at the github repo please.
/// object-list-item.ios.ts
// [...]
export class ObjectListItem extends ObjectListItemBase {
// added for TypeScript intellisense.
nativeView: UIView;
// [...]
/**
* Creates new native button.
*/
public createNativeView(): Object {
const mainUiStackView = UIStackView.new();
// [...]
}
/**
* Initializes properties/listeners of the native view.
*/
initNativeView(): void {
// Attach the owner to nativeView.
// When nativeView is tapped we get the owning JS object through this field.
(<any>this.nativeView).owner = this;
super.initNativeView();
}
/**
* Clean up references to the native view and resets nativeView to its original state.
* If you have changed nativeView in some other way except through setNative callbacks
* you have a chance here to revert it back to its original state
* so that it could be reused later.
*/
disposeNativeView(): void {
// Remove reference from native listener to this instance.
(<any>this.nativeView).owner = null;
// If you want to recycle nativeView and have modified the nativeView
// without using Property or CssProperty (e.g. outside our property system - 'setNative' callbacks)
// you have to reset it to its initial state here.
super.disposeNativeView();
}
[itemProperty.setNative](item: ObjectModel) {
this.item = item;
// [...]
}
}
Add an Angular directive
// object-list-item.directives.ts
#Directive({
selector: 'ObjectListItem',
})
export class ObjectListItemDirective {
}
export const ObjectListItemDirectives = [ObjectListItemDirective];
At least register the component in an Angular module.
// object-list-item.module.ts
// [...]
#NgModule({
imports: [],
declarations: [
ObjectListItemDirectives,
],
schemas: [NO_ERRORS_SCHEMA],
exports: [
ObjectListItemDirectives,
],
entryComponents: [],
})
export class ObjectListItemModule {
}
registerElement('ObjectListItem', () => ObjectListItem);
After all this steps call the new component in the template
<!-- [...] -->
<RadListView #myListView [items]="items$ | async">
<ng-template tkListItemTemplate let-item="item">
<StackLayout margin="0" padding="0" class="-separator m-y-5" height="90">
<android>
<!-- [...] -->
</android>
<ios>
<ObjectListItem [item]="item"></ObjectListItem>
</ios>
</StackLayout>
</ng-template>
</RadListView>
<!-- [...] -->
All this work is well spent. The UI is much faster and it feels more like a native app. At the mean time i build a prototype as a native iOS App in Swift and SwiftUI, of course this pure native app are a little bit more smoother, but at the moment i work with my {N}-App and the native component. Hope this sample will be useful for someone.
From here :
https://github.com/dart-lang/angular_components_example/blob/master/example/app_layout_example/lib/app_layout_example.html
I want to split this template in two templates:
one for sidebar <material-drawer>, named for example sidebar_component.{dart,html}
one other for <div class="material-content">, named for example app_component.{dart,html}
Question:
How to reach <material-drawer> from sidebar_component, with <material-button icon class="material-drawer-button" (trigger)="drawer.toggle()"> into app_component?
Components are encapsulated on purpose. So there isn't a super easy way to reach into the encapsulation of one component from the other.
What you can do is create a passthrough from one component to the other.
<side-bar #sidebar></side-bar>
<app-component (openSideBar)="sidebar.toggle()"></app-component>
sidebar_component
#Component()
class SidebarComponent {
#ViewChild(MaterialPersistentDrawerDirective)
MaterialPersistentDrawerDirective drawer;
void toggle() => drawer.toggle();
}
app_component.dart
#Component()
class AppComponent {
final _openSideBar = StreamController<void>();
#Output()
Stream<void> openSideBar => _openSideBar.stream;
// This is getting called by the trigger of the button click
void onButtonClick() => _openSideBar.add();
}
I would say that for me passing all of these events feels like a bit of a smell. The components themselves are breaking encapsulation and so I wouldn't architect the app exactly like that.
I would probably have the contents of the drawer be a component, and perhaps the header and body depending on how complex they got. To have something more like this:
<material-drawer #drawer>
<side-bar *deferredContent></side-bar>
</material-drawer>
<div class="material-content">
<app-header class="material-header shadow" (triggerDrawer)="drawer.toggle()">
</app-header>
<router-outlet></router-outlet>
</div>
I find it better to keep the app-layout logic in the same components if possible and encapsulate the pieces of that. You could also pass the drawer as an input, but then you are making those highly coupled which I tend to try not to do.
I am trying create a storybook for my react-realy app, but i don't know how to set mockup data for that component. For simple a component it is ok, because i can use dummy UI component vs Container approach, but i can't use this for nested relay components, for example there is a UserList component, which i want add to storybook, i can split relay fragment part to container and UI part to the component, but what if UserList children are too relay component? I can't split their when they are a part of the composition of UserList?
Is there some solution for add relay components to the storybook?
I created a NPM package called use-relay-mock-environment, which is based on relay-test-utils which allows you to make Storybook stories out of your Relay components.
It allows nesting of Relay components, so you can actually make stories for full pages made out of Relay components. Here's an example:
// MyComponent.stories.(js | jsx | ts | tsx)
import React from 'react';
import { RelayEnvironmentProvider } from 'react-relay';
import createRelayMockEnvironmentHook from 'use-relay-mock-environment';
import MyComponent from './MyComponentQuery';
const useRelayMockEnvironment = createRelayMockEnvironmentHook({
// ...Add global options here (optional)
});
export default {
title: 'MyComponent',
component: MyComponent,
};
export const Default = () => {
const environment = useRelayMockEnvironment({
// ...Add story specific options here (optional)
});
return (
<RelayEnvironmentProvider environment={environment}>
<MyComponent />
</RelayEnvironmentProvider>
);
};
export const Loading = () => {
const environment = useRelayMockEnvironment({
forceLoading: true
});
return (
<RelayEnvironmentProvider environment={environment}>
<MyComponent />
</RelayEnvironmentProvider>
);
};
You can also add <RelayEnvironmentProvider /> as a decorator, but I recommend not doing that if you want to create multiple stories for different states/mock data. In the above example I show 2 stories, the Default one, and a Loading one.
Not only that, it requires minimal coding, where you don't need to add the #relay-test-operation directive to your query, and the mocked data is automatically generated for you using faker.js, allowing you to focus on what matters, which is building great UI.
Feel free to review the source code here if you want to implement something similar: https://github.com/richardguerre/use-relay-mock-environment.
Note: it's still in its early days, so some things might change, but would love some feedback!
I also created relay-butler, which is a CLI that takes in GraphQL fragments and outputs Relay components, including a auto-generated query component that wraps the fragment component, and Storybook stories (the Default and Loading ones by default) that wrap that query component. And literally within minutes, I can create beautiful Relay components that are "documented" within Storybook.
Would also love some feedback for it!
I am extending hcm.emp.payslip app and need to add a button in the footer....what is the right way of doing it?..
option 1: placing a extension point as described in page 13 of this pdf.. -- it didnt work..I followed exactly the steps mentioned. or will this not work as we are inserting an extension point ourselfs and which is not supported now.?
option 2: extending UI controller hooks as described here -- I couldnt try this as the documentation is very brief and I am a beginner...Also I am not sure if we can change the view by extending controller
I am using eclipse, and installed the Tool kit plug-in, some places I saw they recommended using Web IDE, but we would like to do it using tool kit, as I am not sure if we have cloud HANA access. or is it still fine to use the UI tool kit way..
would like to suggest the right approach with detailed steps...
Your Option 1 is not possible(Why? Because to add button to the footer there is controllerHook not UI extension point)
Go with Option 2 there are already extensionHooks given in all the controllers (S3.controller.js and in S3_phone.controller.js) of detail pages of the application.
controllerHook : extHookChangeFooterButtons
by Default SAP builds headerFooterOptions and sends that object to your extension Hook
/**
* #ControllerHook Modify the footer buttons
* This hook method can be used to add and change buttons for the detail view footer
* It is called when the decision options for the detail item are fetched successfully
* #callback hcm.emp.payslip.view.S3_Phone~extHookChangeFooterButtons
* #param {object} objHdrFtr-Header Footer Object
* #return {object} objHdrFtr-Header Footer Object
*/
if (this.extHookChangeFooterButtons) {
objHdrFtr = this.extHookChangeFooterButtons(objHdrFtr);
}
So you in the extended controller, receive the same append:
extHookChangeFooterButtons: function (objHdrFtr) {
//first if the buttonsList is empty, create one.
//Actually in S3.controller.js buttonsList is not defined since there are no buttons
if (!objHdrFtr.buttonList) {
objHdrFtr.buttonList = [];
}
//then create a button:
var extendedButton = {
sId: "EXT_BUTTON",
sI18nBtnTxt: "SAMPLE", //make sure you add texts in respective i18n files
bEnabled: true,
onBtnPressed: function (evt) {
that.handleExtButtonPress(evt);
}
};
objHdrFtr.buttonList.append(extendedButton)
//as you can see SAP says to return the object
return objHdrFtr;
}
Suggestion: Its very easy to do it in Web IDE.
Why?
It takes no time SETUP.
Very easy to use, saves lot of time
Shows all controllerHooks,
extension Points in UI
For the above example in Fiori Inbox use B.aButtonList.push(extendedButton); which will add the button to the end of the list (instead of append)