Add SP.UI.Dialog box to SharePoint hosted App Part

As per most of the links online, this is something not easily possible. However, I was able to get it to work!! I thought of sharing my newly acquired knowledge for the benefit of community.

Assumptions:
The only big assumption here is that you need code in the hosted page in order for this to work. You could easily add the little code required for this to work in any .JS file associated with the page/site.

Technologies Involved

• Windows.postmessage/Listeners
• SP.UI.Dialog
• Sharepoint hosted App with 2 App Parts

Scenario/Issue

App part is added to the host page and has some link. The link on the app part should open as a dialog box. Outcome: App part page opens a SP.UI.Dialog box

My scenario
The App part 1 is linked to a list. The second app part we need to open is to allow user to add new item to the list. 

Here is how to get this working.

1. Using Windows.postmessage and listener a channel to communicate between the App Part 1 and host page. In the App Part 1, you can add the code to App.js file or any other file that is being used. In the host you can just put the code to listen to a message.
2. Create an App Part 2, which would be the URL of the SP.UI.Dialog commands.
3. Click event in the App Part, should send a message to Host page.
4. On receiving the message, host page should use the standard code of SP.UI.Dialog to open App Part 2.
5. The last key aspect here is that you cannot close the dialog box that is opened easily. Therefore, you would need to send a message back to host, which would trigger the code to close the dialog box.

Enclosing a screen shot...describing the 3 windows. I still have to clean the UI.

Note: You could even use Jquery Dialog box, but I had issues it inconsistent loading and setting height etc. was not working.