Portals Archives - Aric Levin's Digital Transformation Blog http://aric.isite.dev/tag/portals/ Microsoft Dynamics 365, Power Platform and Azure Thu, 12 May 2022 03:13:04 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.3 Power Platform 2020 Release Wave 2 plan http://aric.isite.dev/portals/post/power-platform-2020-release-wave-2-plan/ Wed, 08 Jul 2020 23:49:00 +0000 https://aric.isite.dev/index.php/2020/07/08/power-platform-2020-release-wave-2-plan/ Today, July 8, 2020, Microsoft released the Power Platform and Microsoft Dynamics 365 2020 Release Wave 2 plan documentation with a list of all the features that will be made available in the Wave 2 timeframe which starts October 2020 until March 2021. Going through all of the features is almost impossible unless you want a few hundred pages of documentation.

The post Power Platform 2020 Release Wave 2 plan appeared first on Aric Levin's Digital Transformation Blog.

]]>
Today, July 8, 2020, Microsoft released the Power Platform and Microsoft Dynamics 365 2020 Release Wave 2 plan documentation with a list of all the features that will be made available in the Wave 2 timeframe which starts October 2020 until March 2021. Going through all of the features is almost impossible unless you want a few hundred pages of documentation.

In this post, I am going to review some of my favorite and anticipated features in the Power Platform, especially Power Apps Portals and Model Driven Apps.

Let’s start with some of the anticipated changes to Power Apps Portals. Screenshots were not yet available for the Power Apps Portals, so I will just list some of them out:

Power Virtual Agents as a component of the Power Apps portals Studio. This will allow portal makers to drag and drop a Power Virtual Agents bot component on their portal, similar to the way that it is done with the Power BI Component.

Power Apps component framework control suppose in Power Apps portals. This will allow app makers to create code components to use across apps. As part of the initial release, this will include support for code components created sing Power Apps component framework inside of Power Apps portals. This feature is expected to be in Public preview on December 2020.

Power Apps portals web API General availability. This feature will make Power Apps portals CRUD web API generally available for all customers. It is expected to be in GA in February 2021.

Next, let’s look at some of the changes that are coming to our Model-driven apps.

Makers can add custom page in the model-driven app designer. This enabled model apps to create custom layouts and use PCF controls in ways that are not possible with the model-driven app form and dashboard pages. Using the modern app and sitemap designers, custom pages can be added enabling more flexibility in the components, behaviors and visuals. These pages are authored using Canvas designer with no code/low code support and configuration of controls and components. These enhancements will be in Public preview in December 2020.

Power Platform 2020 Release Wave 2 Plan - Custom Pages

Modern model-driven app and sitemap designers enable more productivity. This enhancement enables authoring model-driven apps and sitemap within context and aligned with the other designer in the Power Apps shell. The new app designer makes app authoring easier, with page based authoring approach that complements existing sitemap/entity authoring. A preview canvas is added to clarify the parts of the app that are being edited, and leverages the modern entity, form and view designers as well as providing access to other classic designers. These enhancements will be in Public preview in December 2020.

Power Platform 2020 Release Wave 2 Plan - App and Sitemap designer

New and improved global search experience in model-driven apps. The Global search experience in model-driven apps is easy, intuitive and modern. The search bar provides suggestions on recent records, automatic records suggestion on types query, improved search results page, high quality results that allow users to search for information quickly and easily. The improvements to the search experience will also allow users to use relevance search on the desktop. This will be in GA in October 2020.

Power Platform 2020 Release Wave 2 Plan - Global Search

Improved model-driven app header, sitemap and app switching. The model driven app shell has gone through various enhancements and has an updated Office app launcher. When clicking on the app name, it will open the inline app switcher. When the website is opened without an app parameters, the message bar enabled switching to a specific app. The classic sitemap controls have been replaced with modern sitemap controls for better usability. This will be in GA in October 2020.

There are a lot more enhancements that the ones I mentioned in this post, and not only in Power Apps, but also in Power Automate, Power Virtual Agents, AI Builder, Power Platform Administration and the Common Data Model.

You can view or download the full Power Platform 2020 release wave 2 plan from here.

The post Power Platform 2020 Release Wave 2 plan appeared first on Aric Levin's Digital Transformation Blog.

]]>
Showing page status of multi-page forms in Power Apps Portals http://aric.isite.dev/dynamics/post/multipage-status-powerapps-portals/ Sat, 23 May 2020 00:47:00 +0000 https://aric.isite.dev/index.php/2020/05/23/showing-page-status-of-multi-page-forms-in-power-apps-portals/ Creating navigation in a Power Apps portal application is straight forward, and can easily be done using Web Link Sets, but how about showing to the user where they are in the process and modifying the style of each element once the user has finished entering the data for that page. We have done this a few times and this involves the combination of liquid and JavaScript code on the different pages.

The post Showing page status of multi-page forms in Power Apps Portals appeared first on Aric Levin's Digital Transformation Blog.

]]>
Creating navigation in a Power Apps portal application is straight forward, and can easily be done using Web Link Sets, but how about showing to the user where they are in the process and modifying the style of each element once the user has finished entering the data for that page. We have done this a few times and this involves the combination of liquid and JavaScript code on the different pages.

Let’s start from the beginning. The first thing that we need to do is to create the Web Link Set that we are going to use. In our case, we are using a web link set called Legal. Notice that the Display Order is important, because we are going to write that back to the record every time we navigate from one page to the next.

The screenshot below shows a sample of the Web Link view for our Legal Web Link Set.

Power Apps Portal Web Link Set

The next thing that we want to do is create the field on the entity that will capture that page that we are currently on (or the change of the record during submission. We will need to add the field to the entity, but also add the field to every tab (entity form) that is displayed on the application. The first screenshot shows the field that is created on the Application entity. For our purpose we used two field, but only the Last Page completed field is required.

Power Apps Portal - Required Attributes

Once the field is created, we will add that field to all of the tabs that are displayed in Entity forms. We have a custom form called Portal Application, where everything that is displayed on the portal is set. In our Legal Advice page for example, you can see that the page contains the Last Page Visited and Last Page Completed so that they can be populated on the portal form.

Power Apps Portal - Model Driven Forms Designer

We have a web template that displays the navigation area of the application. In that web template, we are retrieving the value of the last page completed, and will perform some logic on it.

We start by verifying the template has a unique identifier that will allow us to retrieve the application, and assigning the app variable to the application entity, and then setting the category and the last page completed fields to the assigned variables.

{% if request.params.id != null and request.params.id != empty %}
   {% assign app = entities["bac_application"][request.params.id] %}
   {% assign application_category = app["bac_applicationcategoryid"].name %}
   {% assign last_page_completed = app["bac_lastpagecompleted"] %}
{% endif %}

We then retrieve the Web Link set for the category that we specified

{% case application_category %}
  {% when 'Legal Assistance' %}
    {% assign app_nav = weblinks["Legal"] %}
  {% else %}
    {% assign app_nav = weblinks["General"] %}
{% endcase %}

Now that we have the Web Link Set and the Last page completed, we will loop through the Web Link Set and perform a few checks. We will check the application status to verify if the application has been completed or not and check the value of the last page completed to verify whether or not we have already reached a particular page. We will also check if the current page is the same as the Url of the page on linkset so that we can have different style for the current page to notify the user this is the page we are on.

In every condition we include a link to the Navigation Item which contains that code to the styling of the link, passing the style that the link should display. The loop code is displayed below:

{% if app_nav %}
    {% for link in app_nav.weblinks %}
        {% if request.params.id != null and request.params.id != empty %}
            {% if link.adx_displayorder > 20 %}
                {% if link.adx_displayorder <= last_page_completed %}
                    {% if (application_status == 'In Progress') %}
                        {% include 'Application Navigation Item' with link, special_class: ' cvd-list-row-thread-completed'  %}
                    {% else %} 
                        {% include 'Application Navigation Item' with link, special_class: ' cvd-list-row-thread-submitted'  %}
                    {% endif %}
                {% else %}
                    {% if link.url == request.path %}
                        {% if forloop.last %}
                            {% if (application_status == 'In Progress') %}
                                {% include 'Application Navigation Item' with link, special_class: ' cvd-list-row-thread-completed'  %}
                            {% else %} 
                                {% include 'Application Navigation Item' with link, special_class: ' cvd-list-row-thread-submitted'  %}
                            {% endif %}
                        {% else %}
                            {% include 'Application Navigation Item' with link, special_class: ' cvd-thread-current'  %}
                        {% endif %}        
                    {% else %}
                        {% include 'Application Navigation Item' with link, special_class: ' '  %}
                    {% endif %}
                {% endif %}
            {% endif %} <!-- link.adx_displayorder > 20 -->
    {% endfor %}
{% endif %}

Since we are also displaying the controls on the form, we need to add JavaScript code to hide the controls and set the value of the next page on the last page completed, so that when the page is submitted that will be written to the entity record. The code below shows the JavaScript.

$(document).ready(function () {
   var url = window.location.href;
   $("#bac_lastpagecompleted").parent().parent().hide();
   $("a").filter(".page-link.cvd-link-navigation.cvd-custom-event").each(function () {
      if (this.href == url) {
         var maxPageNumber = 0;
         if ($("#bac_lastpagecompleted").val() != "")
            maxPageNumber = parseInt($("#bac_lastpagecompleted").val());
         var displayOrder = parseInt($(this).attr("adx_displayorder"));
         var nextPage = displayOrder;
         if (nextPage > maxPageNumber)
            $("#bac_lastpagecompleted").val(nextPage);
      }
   });
});

Now that we have completed our review, we can take a look at the final result.

Power Apps Portal Page Navigation Demo

The post Showing page status of multi-page forms in Power Apps Portals appeared first on Aric Levin's Digital Transformation Blog.

]]>
Emergency Response for Businesses in the City of New York http://aric.isite.dev/dynamics/post/emergency-response-covid19-nyc/ Fri, 27 Mar 2020 18:00:00 +0000 https://aric.isite.dev/index.php/2020/03/27/emergency-response-for-businesses-in-the-city-of-new-york/ We have all been affected by the COVID-19 outbreak one way or another and have started getting used to a new reality, whether it is working remote, not being able to go to work or even worse have gotten infected by the virus. A few weeks ago (March 8), the mayor of New York City, Bill de Blasio said that the city would provide relief for small businesses across the City seeing revenue reduction of 25% or more because of the COVID-19 outbreak.

The post Emergency Response for Businesses in the City of New York appeared first on Aric Levin's Digital Transformation Blog.

]]>
We have all been affected by the COVID-19 outbreak one way or another and have started getting used to a new reality, whether it is working remote, not being able to go to work or even worse have gotten infected by the virus. A few weeks ago (March 8), the mayor of New York City, Bill de Blasio said that the city would provide relief for small businesses across the City seeing revenue reduction of 25% or more because of the COVID-19 outbreak.

For businesses under 100 employees, they would be eligible for a Interest Free loan of up to $75,000 and for business with less than 5 employees, they would provide a grant to cover 40% of payroll costs for two months in order to retain employees.

You can read the news release here.

Working as the Principal Solutions Architect within the Small Business Services department, we were tasked at implementing an easy way for New Yorkers to be able to submit their applications for grants and loans to the city. The agency moved to Dynamics 365 (Online) a couple of years earlier, and we have built a portal that allows businesses to submit certification applications and apply for reimbursement for Construction Safety training.

The grant application seemed to be very aligned to the Construction Safety reimbursement application that we built, and we could probably replicate the logic of this application very quickly. This included both a Model Driven app and a Dynamics Portal application. The Portal application involved multiple pages which allows us to collect business and financial information, and ask the users to upload evidence documents. We were able to go from development to production within less than a week after QA and UAT. For a team of 3 developers, I think this was a great turnaround. We received thousands of applications in the first few days and within the first three days of providing the grant funds, we gave businesses over 2 million dollars.

The day after we went live with the grant we started working on the loan application. This would be a little more complicated. We had most of the logic built within our Model Driven app, which was migrated from CRM On Demand to Dynamics a few months earlier, but the Portal has not been built yet. It was probably the third or fourth project in our backlog, something intended for the end of this year. We could do the same, because we were using different entities and processes for the Applications and for the Service Requests in the Common Data Service.

We created a copy of the logic from the Grant application and started replacing the entire logic so that it uses different types of entities. There was a lot more work to be done for this, but we were able to go through development, QA, UAT and production deployment in less than 1 week. There was a lot of overtime involved, but at the end your feel like you did something good, especially when it is to help people and businesses that are suffering in these times.

COVID-19 for NYC

Why all this from someone who usually write technical content. Well, I have been busy in the last few weeks making sure this is done right and helping coordinate between the agency program team and the application development team, but it just shows you the power of Dynamics and the Common Data Service, whether creating Model-Driven Apps, Canvas Apps and Portal Apps. When you need a quick turnaround, using a Low Code platform can really help you speed up development.

In times like these, there are a lot of fellow MVPs that are helping businesses by developing apps for them to help them in any way they can. See Power Addicts post.

In addition, Microsoft has also developed two solutions to help businesses related to COVID-19.

Crisis Communication: a Power Platform template
Emergency Response solution: A Microsoft Power Platform solution for healthcare emergency response

Hoping that this outbreak will be over soon and we will be able to return to our normal lives.

The post Emergency Response for Businesses in the City of New York appeared first on Aric Levin's Digital Transformation Blog.

]]>
Embed a simple Power Virtual Agent in Power Apps Portal http://aric.isite.dev/powerapps/post/powerva-in-powerapps-portal/ Thu, 19 Dec 2019 06:53:00 +0000 https://aric.isite.dev/index.php/2019/12/19/embed-a-simple-power-virtual-agent-in-power-apps-portal/ A little late in the game as Power Virtual Agent is already in Public Preview and trials are available, but I wanted to demonstrate how easy it is to create a bot, publish it and add it to your Power Apps Portal page.

The post Embed a simple Power Virtual Agent in Power Apps Portal appeared first on Aric Levin's Digital Transformation Blog.

]]>
A little late in the game as Power Virtual Agent is already in Public Preview and trials are available, but I wanted to demonstrate how easy it is to create a bot, publish it and add it to your Power Apps Portal page.

Power Virtual Agents allows user to quickly and easily create powerful bots using a graphical no-code graphical experience. To start creating our first bot, we navigate to powerva.microsoft.com or aka.ms/TryPVA which will redirect to powervirtualagents.microsoft.com.

Sign in to your account or Sign up for a trial, and you will be ready to start developing your first Bot. The Home Screen of Power Virtual Agents is similar to other Power Platform applications. On the left side you will have the Navigation, and on the top right your shortcuts and settings.

To start with your first bot, click on the bot button in your Office 365 Navigation Header (shown as #1 in the image below). This will pop open the bots panel. The bots panel will display the New bot button (shown as #2 in the image below) as well as any existing bots that you may have already created and want to edit.

Once you click on the New bot button the Create a new bot popup will be displayed. Enter the name of the bot that you want to create, and under More options you can select the environment where you want to use the bot (in case you have more than a single environment). Click on the Create button when you are ready to create the bot.

Once the Create button has been clicked, Power Virtual Agents will start the process of creating the new bot. This can take a few minutes to complete. In the interim the screen below will be displayed.

There are many different things that we can do to create a fully functional bot, but in this case we will create a simple bot with just a few questions.

When the bot has been created, we can click on Topics to start authoring the different topics that we want to use for our bot. Topics have trigger phrases, which are phrases, keywords or questions that are likely to be entered by a user regarding a particular issue. These topics are used to define how the bot should answer and what actions it should perform. There can be up to 1000 topics in a bot.

To start creating Topics we first need to click on the Topics link on the left hand navigation.

Power Virtual Agents - Topics

Once the Topics page opens up, we click on the New topic button in order to create a new Topic. We can also click on an existing topic to make changes to it. The Topic window shows up. We enter a name and optional description for the Topic, and then start entering Trigger phrases.

For example, if we want to respond to questions regarding a Tax Payer Id Number, we can add a few triggers such as:

  • How many digits is my Taxpayer Id Number?
  • Do I need to enter a hyphen or dash in my Tax Payer Id?
  • Can I enter an ITIN instead of EIN?

The screenshot below shows a sample Required fields trigger for First Name, Last Name and Email Address and a few possible triggers.

Power Virtual Agents - Trigger Phrases

When all the triggers have been specified, we Save the Topic, and click on the Go to authoring canvas button on the right hand side to start authoring the logic that will be displayed when the user asks the question.

Within the authoring canvas we will see a first node containing the Trigger Phrases. We can add different nodes after the Trigger Phrases which include:

  • Ask a question
  • Call an action
  • Show a message
  • Go to another topic
  • End the conversation

In this particular example we will just add a couple of messages after the questions to display information about the reasoning for asking the information that we asked.

After authoring the topic, we can save the topic and will see it in the list of Topics on the Topics page. You will notice the Topics have an On or Off Status, which means that you can create Topics and disable them until they are ready to use.

Power Virtual Agents - Topics

The final step in designing the bot is publishing it. After a bot is published, it can be used in a wide variety of applications such as Custom Web Site, Portal, Teams and more.

Click on the Publish navigation link on the left hand side, and on the Publish page, click on the Publish button to Publish the bot.

Power Virtual Agents - Publish

After the bot has been published, we can click on the demo website to see how the bot will look and behave in response to particular actions.

When we are satisfied with the bot, we can add it to our Power Apps Portal site or page, by adding the custom code to the Portals page. We navigate to the Channels page by clicking on Channels on the left navigation, and then select the Custom website channel.

First, we copy the code from the Custom Website under the Embed code panel. Then we open the required page on our Power Apps Portal site, and click on the code editor. In the area where we want to display the bot, we will paste the code:

<iframe src=”https://powerva.microsoft.com/webchat/bots/00000000-1111-2222-3333-444455556666″ frameborder=”0″ style=”width: 100%; height: 100%;”></iframe>

Save the changes to your Power Apps Portal page, and navigate to the page to see how it looks. You should now be able to see the bot on your page in Power Apps Portal.

Power Apps Portal with Power Virtual Agent

You should be able to create a bot and embed it on your web page in just a few minutes. For developing more comprehensive bots, visit the Microsoft Power Virtual Agents documentation site by following the link below:

https://docs.microsoft.com/en-us/power-virtual-agents/

The post Embed a simple Power Virtual Agent in Power Apps Portal appeared first on Aric Levin's Digital Transformation Blog.

]]>
Microsoft Dynamics 365 and Power Platform 2019 Release Wave 2 http://aric.isite.dev/dynamics/post/dynamics365-powerplatform-2019-wave2/ Thu, 08 Aug 2019 08:15:00 +0000 https://aric.isite.dev/index.php/2019/08/08/microsoft-dynamics-365-and-power-platform-2019-release-wave-2/ The Microsoft Dynamics 365 2019 Release Wave 2 is not available for early adopters. The release is scheduled to start deployment to production environments starting in October of 2019. During August and September, Microsoft Dynamics customers check out the upcoming list of updates that will be released in October.

The post Microsoft Dynamics 365 and Power Platform 2019 Release Wave 2 appeared first on Aric Levin's Digital Transformation Blog.

]]>
The Microsoft Dynamics 365 2019 Release Wave 2 is not available for early adopters. The release is scheduled to start deployment to production environments starting in October of 2019. During August and September, Microsoft Dynamics customers check out the upcoming list of updates that will be released in October.

A total of 74 new features will be released across the different Microsoft Dynamics 365 applications and the Power Platform. You can check out the full list of features by viewing the Microsoft Dynamics 2019 Release Wave 2 Documentation.

Amongst the newly released features are enhancements to the Timeline control, Softphone dialer, Business card scanner, customization of the Opportunity Close dialog box. In addition to that, the Power Platform is getting quite a few additions including the addition of AI Builder, PowerApps Portals,  UI improvements to Unified Interface, Reusable Canvas components and more.

Dynamics 365/Power Platform 2019 Release Wave 2

To view the full release plan for Dynamics 365 and the Power Platform, click on the links below:

Dynamics 365 2019 Release Wave 2

Power Platform 2019 Release Wave 2

The post Microsoft Dynamics 365 and Power Platform 2019 Release Wave 2 appeared first on Aric Levin's Digital Transformation Blog.

]]>
SharePoint Documents are back in Dynamics Portals October 2018 Release http://aric.isite.dev/dynamics/post/sharepoint-documents-dynamics-portals-october-2018/ Tue, 24 Jul 2018 13:38:00 +0000 https://aric.isite.dev/index.php/2018/07/24/sharepoint-documents-are-back-in-dynamics-portals-october-2018-release/ Ever since Microsoft purchased AdxStudios and replaced the product with Dynamics Portals, one of the biggest pains was the removal of SharePoint documents. The interim solution of course was available using Azure blobs with the Dynamics Labs solution which provided document uploads, but using the Out of the Box SharePoint Documents was a miss by a lot of Portal Developers.

The post SharePoint Documents are back in Dynamics Portals October 2018 Release appeared first on Aric Levin's Digital Transformation Blog.

]]>
Ever since Microsoft purchased AdxStudios and replaced the product with Dynamics Portals, one of the biggest pains was the removal of SharePoint documents. The interim solution of course was available using Azure blobs with the Dynamics Labs solution which provided document uploads, but using the Out of the Box SharePoint Documents was a miss by a lot of Portal Developers.

WIth the announcement of the October 2018 release of Microsoft Dynamics 365 (version number yet to be determined), which includes a mass number of features, one of the features that was included was management of SharePoint documents inside Dynamics portals.

This feature extends the document management capabilities of Dynamics 365 to portals, providing a consistent experience and allowing users to leverage their investment in SharePoint with Dynamics 365 for document management. Documents that are associated with entity records can be managed by portal users and stored in the SharePoint document library, providing seamless collaboration capabilities offered natively by SharePoint. SharePoint document libraries configured with entities in Dynamics 365 can be surfaced via the portal entity and web forms.

The additional of SharePoint documents for portals provides the following features:

  • Adding documents to a SharePoint Library via Portals
  • Viewing and downloading documents in a SharePoint Library via Portals
  • Creating folders in a SharePoint Library via Portals
  • Deleting documents in a SharePoint Library via Portals

The screenshot below shows adding a new file to the document library, a much cleaner interface than the existing Azure blob (notes) option.

Portal SharePoint Documents

Enjoy reading the new features that are available in the October 2018 release of Dynamics 365 available here. You can also download the 236 page pdf which contains the contents of the link and the features in this release.

The post SharePoint Documents are back in Dynamics Portals October 2018 Release appeared first on Aric Levin's Digital Transformation Blog.

]]>
Changing the details page link url for Entity Lists http://aric.isite.dev/dynamics/post/change-entity-list-details-page-link/ Thu, 12 Jul 2018 03:26:00 +0000 https://aric.isite.dev/index.php/2018/07/12/changing-the-details-page-link-url-for-entity-lists/ When displaying entity lists on a web page, there is usually a default column in a view which is displayed as a hyperlink. The link to the page is displayed based on the Web Page for Details View and the ID Query String Parameter Name attributes on the Entity List form (as shown in the image below). The problem is, what happens if my page that is displaying the Entity List already has query string parameters, and you want to keep those parameters on the next page that you are going to display.

The post Changing the details page link url for Entity Lists appeared first on Aric Levin's Digital Transformation Blog.

]]>
When displaying entity lists on a web page, there is usually a default column in a view which is displayed as a hyperlink. The link to the page is displayed based on the Web Page for Details View and the ID Query String Parameter Name attributes on the Entity List form (as shown in the image below). The problem is, what happens if my page that is displaying the Entity List already has query string parameters, and you want to keep those parameters on the next page that you are going to display.

Entity List Attributes

The Options tab on the Entity List form contains a custom JavaScript section, which we can control what happens when the document is loaded or when the grid refreshes/loads. We can use the $(“.entitylist.entity-grid”).on(“loaded”, function () { }) to process anytime the grid is reloaded, sorted or paged through. The image and code snippet below provide us with an example on how this can be accomplished.

Entity List Options (Javascript)

When the grid is loaded, we retrieve the existing query string and place it into a variable. We then loop through all the results of the table (entity list), by using the jquery each function. We get the current url that is in the anchor attribute, and append the existing query string to it. We finally write back to the anchor attribute the new url. The code below shows everything withing the document ready function.

$(document).ready(function () {
  $(".entitylist.entity-grid").on("loaded", function () { 
    var url = window.location.href;
    var queryStrings = url.substring(url.indexOf("?") +1);
    $("[href^='/business-info']").each(function(){
        var currentUrl = ($(this).attr('href'));
        var targetUrl = currentUrl + "&" + queryStrings;
        $(this).attr("href", targetUrl);
    });  
  });  
});  

If your page was start-business?id=999, when you click on the link the page you will be redirected to would be business-info?slid=12345678-1234-1234-1234-1234567890AB&id=999. The querystring from the previous page is now appended to the new page.

The post Changing the details page link url for Entity Lists appeared first on Aric Levin's Digital Transformation Blog.

]]>
Adding masking to form controls in Dynamics Portals http://aric.isite.dev/dynamics/post/dynamics-portals-textbox-masking/ Thu, 21 Jun 2018 13:21:00 +0000 https://aric.isite.dev/index.php/2018/06/21/adding-masking-to-form-controls-in-dynamics-portals/ It is a pretty known practice today, that when creating a web application that requests data from customers, certain fields are masked so that the system can prevent the entry of incorrect data. This has been done in desktop applications for a long time and is now also very common in web based applications.

The post Adding masking to form controls in Dynamics Portals appeared first on Aric Levin's Digital Transformation Blog.

]]>
It is a pretty known practice today, that when creating a web application that requests data from customers, certain fields are masked so that the system can prevent the entry of incorrect data. This has been done in desktop applications for a long time and is now also very common in web based applications.

Microsoft Dynamics Portals does not provide a way to implement this out of the box, but the path to implement this is simple and straight forward. The first thing that we need to do in order to get this working is get a jQuery mask plugin. The most common plugin that I have seen is the jQuery Mask Plugin created by Igor Escobar. It is available for download from github in the following link:

http://igorescobar.github.io/jQuery-Mask-Plugin/

Next we need to add that plugin to our Dynamics Portals application. In order to do this, I would refer you to a previously published article that I wrote called JavaScript Web Files in CRM Portals. You can read it on the Dynamics Community or my business web site using one of the links below:

https://community.dynamics.com/crm/b/briteglobalsolutions/archive/2018/05/02/javascript-web-files-in-crm-portals or https://www.briteglobal.com/blogs/community/portals-web-files/

Add the script file to the Tracking Code Content Snippet and upload it as a Web file so that it can be accessed across the application. At this point, the hard part is done. In the sample below, on the On my Entity Form Custom JavaScript, I will add the following code to mask my Tax Id and Social Security Numbers.

jQuery(function($){   
   $("#new_ein").mask("99-9999999");      
   $("#new_ssn").mask("999-99-9999"); 
});

The github site above contains plenty of examples for masking. The above was just a simple example. Finally, in the form that I would like to open, what I will see when I click on the control is the masking of the Tax Id number.

Dynamics Portal Masking

Next as I fill it out, it will only allow me to fill the numbers that I have specified in my jQuery function.

Dynamics Portals Masking

The post Adding masking to form controls in Dynamics Portals appeared first on Aric Levin's Digital Transformation Blog.

]]>
Using Placeholders in Portal Entity Form Text Controls http://aric.isite.dev/dynamics/post/using-placeholders-in-portal-text-controls/ Fri, 15 Jun 2018 23:32:00 +0000 https://aric.isite.dev/index.php/2018/06/15/using-placeholders-in-portal-entity-form-text-controls/ Recently I was working on a project, where the client needed all fields to have placeholders for accessibility reasons. When looking at the attribute metadata of the Entity Form, we are allowed to enter some text above or below the textbox control (or above the label), but the option is not available to prepopulate the control with some text when there is no data in it. After seeing a few community questions on how to implement this, I thought to share the solution.

The post Using Placeholders in Portal Entity Form Text Controls appeared first on Aric Levin's Digital Transformation Blog.

]]>
Recently I was working on a project, where the client needed all fields to have placeholders for accessibility reasons. When looking at the attribute metadata of the Entity Form, we are allowed to enter some text above or below the textbox control (or above the label), but the option is not available to prepopulate the control with some text when there is no data in it. After seeing a few community questions on how to implement this, I thought to share the solution.

Using JQuery we are able to easily add this functionality by using the attr function. The code sample below add placeholders for the Tax Id and Social Security Number fields. This code can be placed on either the Entity Form JavaScript section or on the Web Page JavaScript section.

$(document).ready(function () {
 // Add Placeholders for Tax Information
 $("#new_ein").attr("placeholder", "Enter your Tax Id Number" );
 $("#new_ssn").attr("placeholder", "Enter your Social Security Number" );
});

The screenshot below shows the result of displaying the placeholder on the Portal Form.

Dynamics CRM Portal Placeholder for Textbox

The post Using Placeholders in Portal Entity Form Text Controls appeared first on Aric Levin's Digital Transformation Blog.

]]>
Changing Portal Lookup Control to Hyperlink Style Control http://aric.isite.dev/dynamics/post/portal-lookup-control-hyperlink-style/ Sat, 19 May 2018 01:24:00 +0000 https://aric.isite.dev/index.php/2018/05/19/changing-portal-lookup-control-to-hyperlink-style-control/ Recently we had a requirement to change the Lookup Control in the Portal to look like a hyperlink, so that when the user clicked on the Hyperlink it would pop up the Lookup Dialog.
The Lookup control was displayed as part of an entity form, so the only way to really do this was with jquery.

The post Changing Portal Lookup Control to Hyperlink Style Control appeared first on Aric Levin's Digital Transformation Blog.

]]>
Recently we had a requirement to change the Lookup Control in the Portal to look like a hyperlink, so that when the user clicked on the Hyperlink it would pop up the Lookup Dialog.
The Lookup control was displayed as part of an entity form, so the only way to really do this was with jquery.

The first thing that we wanted to do was customize the label above the lookup control, so that it looked like a hyperlink, so we set a couple of styles on the label and modified the text.

$(“#accountid_label”).css(“color”, “#0039e6”);

$(“#accountid_label”).css(“cursor”, “pointer”);

$(“#accountid_label”).text(“Lookup Company”);

We then wanted to hide the actual lookup control

$(“#accountid_name”).parent().hide();

Then we added an onclick attribute to the label of the lookup control

  $(“#accountid_label”).attr(‘onclick’, ‘showLocationLookup()’);

The onclick attribute that we added called a function that would perform the click event of the lookup control to display the dialog.

function showLocationLookup()

{

$(“#sbs_site_locationid_name”).parent().find(‘.input-group-btn’).children().first().next().click();

}

Finally we added an onChange event to the lookup control so that we can retrieve the values from it, and display the control if we wanted to.

$(“#accountid”).change(function(){

    var accountId = $(“#accountid”).val();

    var accountName = $(“#accountid_name”).val();

  $(“#accountid_name”).parent().show();

    $(“#accountid_name”).parent().find(‘.input-group-btn’).children().first().next().hide();

});  

The image below shows the end result. Notice the Lookup Company label at the bottom of the page…

Portal Lookup Hyperlink

The post Changing Portal Lookup Control to Hyperlink Style Control appeared first on Aric Levin's Digital Transformation Blog.

]]>