Archive

Posts Tagged ‘Container’

[Step by Step] Power Apps | Show pop ups in Canvas App

November 15, 2022 Leave a comment

In this article lets see how to show pop-ups in Canvas Apps using Container controls. I am going to explain this topic with two different examples. A ‘Single Popup’ and ‘Dual Popup’.

Single Popup in action:

Dual Popups in action:

Now that you got an idea of the two examples, lets go ahead and learn how to build them.

Step by Step to show single popup:

  • Create a new Canvas App.
  • Add a button ‘Demo Single Popup’ to the screen to show popup.
  • To display a popup, we would need 2 Container controls.
    • First container will bring the gray out affect speeded across the screen.
    • Second container will hold the display content and acts as popup pane.
  • So add the 1st Container on the screen and spread it across the screen.
    • I’ve named the Container as ‘cont_One’.
  • In the “Fill” property of Container (i.e., cont_One), set the value as RGBA(169, 169, 169, .75)
    • RGBA(169, 169, 169, .75) gives gray out affect. You may also use your own color combination.
  • Now add the 2nd Container, by selecting the 1st Container (i.e., cont_One). Make sure you select ‘cont_One’ before adding the second container.
    • I’ve named the2nd Container as ‘cont_Two’.
  • Place the 2nd Container (i.e., cont_Two) middle of the screen and set the background color.
  • Its time to add pop up content. So, select ‘cont_Two’ and add the controls. I’ve added a Label and Button controls as shown below.
  • Now that we got the layout ready, its time to implement hide/show of popup logic.
  • As we need to show popup only on ‘Demo Single Popup’ button click, set a Boolean variable by name ‘ShowPopup‘ on ‘OnSelect’ of ‘Demo Single Popup’ button.
    • Formula : UpdateContext({ShowPopup : true});
  • Now select 1st Container (i.e., cont_One) and set ‘Visible’ as ‘ShowPopup‘ variable which we defined in the previous step.
  • As the popup should be closed on click of ‘Close’ button on 2nd Container (i.e., cont_Two), select the ‘Close’ button and on ‘OnSelect’ event, set the ShowPopup to ‘false’.
    • Formula : UpdateContext({ShowPopup: false});
  • That’s it. Play the App and you should see popup on click of ‘Demo Single Popup’ button and should close on click of ‘Close’ button.

Step by Step to show dual popup:

In the dual popup scenario, everything remains same as we did for single popup and additionally we will add a 3rd Container. Lets get started.

  • Repeat the steps you did during single popup.
    • There is a slight change than what we did in single popup demo in terms of controls.
    • I’ve added ‘Rating’ control instead of label.
  • Now that we added ‘cont_One’ and ‘cont_Two’, to get the dual popup, select ‘cont_One’ and add a new Container and name it as ‘cont_Three’
  • Place the ‘cont_Three’ on top of ‘cont_Two’ and add controls as shown below.
  • We got the layout ready, its time to implement hide/show of popup logic as below.
    • On click of ‘Demo Dual Popup’ button on main screen
      • Show ‘cont_One’.
      • Show ‘cont_Two’
      • Hide ‘cont_Three’.
    • On click of ‘Rate Us’ button of ‘cont_Two’
      • Show ‘cont_One’.
      • Hide ‘cont_Two’.
      • Show ‘cont_Three’.
    • On click of ‘Close’ button of ‘cont_Three’
      • Hide ‘cont_One’.
      • Hide ‘cont_Two’.
      • Hide ‘cont_Three’.
  • Don’t worry, if the above conditions scares you. Its easy to implement. Its how we did by defining ‘ShowPopup‘ variable in showing single popup example. Additionally we would need another variable ‘ShowDualPopup‘ for dual popup.
  • On ‘OnSelect’ event of ‘Demo Dual Popup’ button, set ‘ShowPopup‘ variable as ‘true’ and another variable ‘ShowDualPopup‘ as ‘false’.
    • Formula : UpdateContext({ShowPopup : true, ShowDualPopup:false});
  • Now select 1st Container (i.e., cont_One) and set ‘Visible’ as ‘ShowPopup‘ variable. (Refer screen from single popup example if you need help).
  • Now select 3rd Container (i.e., cont_Three) and set ‘Visible’ as ‘ShowDualPopup‘ variable.
  • As we need to show ‘cont_Three’ only on click of ‘Rate us’ button of ‘cont_Two’, on ‘OnSelect’ of ‘Rate us’ button set the ‘ShowDualPopup‘ variable to ‘true’.
    • Formula : UpdateContext({ShowDualPopup : true});
  • Important point to note is that, we dont need logic to Hide/Show ‘cont_Two’ as it gets visible when ‘cont_One’ is visible and it gets hidden when ‘cont_Three’ is visible as ‘cont_Three’ is top of ‘cont_Two’.
  • Finally, as we need to hide all the popups (i.e., cont_One and cont_Three) once you click the ‘Close’ button on ‘cont_Three’, on ‘OnSelect’ of ‘Close’ button set both ShowPopup and ShowDualPopup variables to ‘false’.
    • Formula : UpdateContext({ShowPopup:false,ShowDualPopup :false})
  • That’s all needed for dual popups. Play the App and you should see dual popups.

🙂

Bootstrap – Getting started

January 14, 2019 2 comments

In this series, I am going to touch base Bootstrap fundamentals and controls. Lets see how to get started with Bootstrap.

What is Bootstrap?

  • Bootstrap is is the most popular CSS (Cascading Style Sheet) Framework for developing responsive and mobile-first websites.
  • Bootstrap framework provides helper css and js files, with which can make your website/web application vibrant and responsive with no additional effort.

bs_intro

Bootstrap – Responsive UI

What is ‘Responsive’ UI:

  • Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).
  • With Bootstrap framework you can make you web pages responsive and fit for all devices.

Below are the steps to use Bootstrap in a sample HTML page

Download the Bootstrap framework:

  • Download the Bootstrap components (i.e., CSS and JS files) from here
    • Note: Instead of downloading the files locally, you can also refer CDN files. Refer this link

bs_1

Download components locally

  • In this article I am downloading the components locally and use it in HTML file.
  • Once you download and unzip, you would notice 2 folders css and js

bs_2

Get start with a sample HTML page:

Once you download the Bootstrap components below are the steps to use Bootstrap in HTML file.

I am using Visual Studio as my code editor, you can also use the editors you are comfortable with.

  • Create a new “Asp.Net Empty Website”
  • Create a new folder “Bootstrap” and place the css and js folders of Bootstrap downloaded in prior section.

bs_3

  • Copy the HTML content from Starter Template of Bootstrap and paste it in your HTML file.

bs_4

Bootstrap – Start Template

  • You would notice the Bootstrap css and js files CDN’s references.
    • Note: CDN references will not work if your machine not connected to Internet.
  • Replace CDN references with local file references, since we already downloaded the Bootstrap files locally and added to Visual Studio.

bs_5

Replace CDN with local references

  • With out making any further changes, run the HTML page and you would notice the output as below.

bs_6

Without Bootstrap

  • You would not find any difference as the HTML page rendered normally, to make the HTML page with Bootstrap styling make sure you follow next step.
  • The key point here is, Bootstrap styles will take affect only if you wrap your HTML tags inside a <div> with class name “container”
    • ‘container’ is the Bootstrap css class name.

bs_8

  • Lets move <h1> tag inside <div class=”container”> and run the HTML page, which renders as below with more vibrant.

bs_7

With Bootsrap

Notes:

  • Bootstrap requires jQuery, hence jQuery file CDN reference comes with Bootstrap ‘Starter Template’
  • You would also get “popper.min.js” in the Bootstrap ‘Starter Template’, which is useful to show pop over notifications.

In the followup articles, we will see the Bootstrap styling of different controls.

🙂

Categories: Bootstrap Tags: , ,

Move Attachments from CRM to Azure Blob – “Attachment Management” tool

December 17, 2017 3 comments

Recently I was exploring options to move attachments from CRM (i.e., Notes and Email) to Azure Blob storage and came across “Attachment Management” tool from Microsoft Labs.

This tool can be installed as a solution to your Dynamics 365 instance. Detailed steps and usage guide are available here.

In this article I am going to detail the imperative Azure and Dynamics 365 settings which would avoid the connectivity issues you may encounter during my usage.

Pre-requisites to use this solution:

  • Dynamics 365 instance (You can subscribe for 30 days trail)
  • Enable the “Attachment Management” solution from App Source.
  • Microsoft Azure Account (You can subscribe for trail)
    • Note: You can use the same Dynamics Office 365 account to register for Azure trail account. 

Setting up Azure Storage Account:

Make sure your Azure Storage Account settings matches with below

  • Azure “Storage Account” ‘KIND’ must be “BlobStorage”.

Attachment - Azure Storage Account

  • “Storage Account” Containers ‘Public Access Level’ must be “Blob”.

Attachment - Containers

  • “Shared Access Signature” (SAS token)
    • Set the “Start” to Previous Day as the Azure time zone depends the data Center you choose. (For example, your IST date may be 1 day ahead of your ‘Data Center’ date which may make your ‘SAS token’ invalid)
    • Set the “End” to at least a week ahead of today.

Attachment - Shared Access Signature

Settings in Dynamics 365:

  • With the “Attachment Management” solution you will get 3 entities and a ‘Site Map Area’ (i.e., Azure Attachment Storage)
  • Make sure you configure settings only from ‘Azure Attachment Storage’ site map link and not from ‘Advanced Find’

Attachment - Sitemap

  • In “Azure Blob Storage Setup” page, make sure the ‘Storage Account Name’, ‘Container names’ and ‘SAS token’ matches with Azure settings

Attachment - BlobStorageSettings

  • In “NOTES ATTACHMENT SETTING ENTITY” page, pick your entities and provide correct “Container” name or leave that blank.
    • Note: If you have Dynamics Portal solution installed, uncheck the ‘Web Files’ entity, if its selected.

Attachment - NotesAttachment Page

Troubleshooting steps:

  • After you configure all the settings try adding a Note with attachment to the entity you configured.
  • If you don’t see your attachments move to Azure Container, go to ‘System Settings’ and look for “MicrosoftLabs.AttachmentManagement…..” job for exception.

Attachment - System Jobs

🙂