I wanted to have a look at the PopupService exposed by the Component Framework. I'm thinking it will be something like of a modal appears whenever the openPopup is invoke which is in my case on a click of a button.
Here's a snippet of my code:
public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement)
{
this.button = document.createElement("button");
this.button.innerText = "Open Canvas";
this.button.addEventListener("click", this.buttonClicked.bind(this))
container.appendChild(this.button);
this.popUpService = context.factory.getPopupService();
this.popUpId = "canvasPopUpContainerId";
this.popUpName = "canvasPopUpContainer";
let appId = context.parameters.canvasAppId.raw;
let recordId = context.parameters.recordId.raw;
let popUpOptions: ComponentFramework.FactoryApi.Popup.Popup = {
closeOnOutsideClick: true,
content: this.createCanvasContent(appId, recordId),
name: this.popUpName,
type: 1
}
this.popUpService.createPopup(popUpOptions)
}
public buttonClicked(event: MouseEvent): any{
this.popUpService.openPopup(this.popUpName);
}
Am I doing this right? What's the right way of doing this? Thank's for anyone who can give an idea 
