AdxStudio Portal

AdxStudio(Customer) Portal Development Guide

This blog contains how to create AdxStudio Portal- Customization, adding custom page in AdxStudio, adding JavaScript in AdxStudio step by step with examples.

1.                Installation

1.1   Download AdxStudio Portal 7.0 or latest from below website(Windows Live ID is required for downloading .msi file):

https://community.adxstudio.com/products/adxstudio-portals/releases/adxstudio-portals-7/download/

1.2   Once downloaded, double click on .msi file and proceed next-next and Finish

1.3   Now Goto CRM Settings -> Solutions -> Import

1.4   Click on Browse and Goto the Cutomizations folder in the AdxPortal directory which we just installed in step 2(Path for zip file: "C:\Program Files (x86)\Adxstudio\XrmPortals\7.0.0022\Customizations\AdxstudioInstaller.zip").  And import Solution

1.5   Once Solution imported successfully, refresh your CRM page and you will find “ADXSTUDIO INSTALLER” button in the left top corner like below:

1.6   Now double click on the Installer button, this will open a License Agreement pop-up. Read and click on Accept:

1.7   You’ll find a dropdown in the left top corner. Select your choice from the options. In this example I am taking Website Gallery and Installing Adxstudio Portals Customer Portal by clicking on Install button as shown in image below:

1.8   Once you selected your option Click on Install butoon in the bottom left corner. It will take few minutes to import all required solution in your CRM organization. Click Finish once all import finishes:

1.9   Refresh your CRM Solution Page, you’ll find all the imported solutions in the list as below:

2.                Setup and Create Portal Website

2.1   Click on Start and type IIS Manager, open it and click Sites and right click and click on Add website

2.2   Provide Site Name and specify an Application pool

2.3   Set the Physical Path to the MasterPortal folder located in the samples folder found in the installation directory of the Adxstudio Portals. The default location is: "C:\Program Files (x86)\AdxStudio\XrmPortals\7.0.0022\Samples\MasterPortal". 

(Another thing you can do is: Just copy the Full folder and paste it in the inetpub like: = "C:\inetpub\wwwroot\YourAdxFolderName", by this way you can avoid any permission issue which may occur further)

2.4   Make sure that .Net framework version is v4.0 selected and resolvable. (For check:  double click on Application Pool -> Click on your Website:

2.5   GoTo Browser and open your website you just configured in the above step: (Page which appears):

2.6   Fill the required details in the page. For Organization URL  goto Settings -> Customizations -> Developer Resources . Your CRM UserName and Password. If all valid then a dropdown populates as shown below having all the list of Portals installed in CRM:

2.7   Click on Apply and your website is ready to use now (A customized portal has been shown below).

3.                Creating Custom .aspx page(Page Template) for Portal

3.1   For adding new Page Template first of all Open Visual Studio and Click on File ->; Open ->; Project/ Solution. Browse and open your AdxStudio Portal Solution(see step 1.4)

3.2   Right Click on your project solution/ folder where you want to add custom page and click on Add -> Add New item  ->; Web Form

3.3   Give the page a name and select Master page for your custom page (I named it CustomPage.aspx and have selected WebFormsContent.master form MasterPages folder)

3.4   Now add Namespace for reference  as shown below

3.5   Remove all unnecessary content place holders. In above screenshot you can see I have used Content4 block. Just for Example I have done the followings:

·         A hardcoded single line text (Hardcoded Text: Hi There! I am using Adx Customer Portal)

·         A Label for retrieving data from CRM

·         Multiple Labels and Textboxes and a Button for data insertion in CRM

3.6   Change the code behind file and inherit from “PortalPage”. This is to access the Helper and other important property. Add minimum required namespaces too

3.7   Now for retrieving Full Name of an existing record from CRM I added below code on Page load(Note: Guid has been hardcoded just for example, please change Guid)

private void GetData()

    {

        var context = new CrmOrganizationServiceContext(new CrmConnection("Xrm"));

        var lead = new Entity("lead");

//Below I have HardCoded Guid Value of an existing record in lead entity            //for Data Retreival

        var accountID = new Guid("341BDEEB-3248-E611-82E5-7071BCBCFB82");

        var accountnumber = (from a in context.CreateQuery("lead")

                       where a.GetAttributeValue<Guid>("leadid") == accountID

             select a.GetAttributeValue<string>("fullname")).FirstOrDefault();

        Label1.Text = accountnumber.ToString();

    }

3.8   And For Inserting Data in CRM, I added basic code with CrmConnection on submit button click event as below:

protected void Button1_Click(object sender, EventArgs e)

    {

    //Crm connection, check web.config file for Crm Connection name

        var context = new CrmOrganizationServiceContext(new CrmConnection("Xrm"));

        var lead = new Entity("lead");

        lead["firstname"] = firstname.Text;

        lead["lastname"] = lastname.Text;

        lead["subject"] = subject.Text;

        lead["emailaddress1"] = emailaddress1.Text;

        lead["mobilephone"] = mobilephone.Text;

        context.AddObject(lead);

        context.SaveChanges();

 }

3.9   Build your code -> GoTo it’s containing folder -> Copy CustomCode.aspx and it’s .CS file ->Paste it inside the Pages folder of AdxStudio Portal Solution which you placed in inetpub(See step 2.3)

4.                Adding Custom .aspx page in Portal

4.1   Navigate to Portals in CRM and select Page Templates and click New

4.2   Provide following details:

·         Name for the page template and

·         Website in lookup URL

·         URL (Folder where you have created your custom page. I have added my custom page in Pages Folder i.e.  ~Pages/CustomPage.aspx)

·         Entity Name (Select Web Page(adx_webpage) in the dropdown)

4.3   Now Goto your AdxStudio Web Portal and SignIn with administrator credentials (UserName: administrator & Password: pass@word1). This way you can edit and customize your portal web pages.

4.4   Navigate to desired web page where you want to show your custom page and click on Edit and Select your Custom Page in Page Template which we added in step 3.2, Save and Close.

4.5   Below I have added screenshot of my custom page which I created and have added as per the steps above

5.    JavaScript Customization in AdxStudio Web Forms

5.1   In this example I am making Email Address field mandatory based on condition

5.2   Login portal. For adding JavaScript in AdxStudio Portal you need to login the portal using administrator credentials

5.3   When logged In, GoTo the web form page where you require adding custom JavaScript code (Note: Custom JavaScript added on CRM doesn’t work on AdxStudio Portal). Click on Edit and GoTo options

5.4   In options tab you get the options to add Custom JavaScript/ custom CSS. In this example first I am adding showing how we can hide field with its label on web form using JavaScript:

var fieldTextBox = $("#emailaddress1").hide();

     var field1Label = $("#emailaddress1_label").hide();

5.5   Next  moving to some more complex, I am going to make a field mandatory based on Value of another filed on the same form(e.g., If first name field value is set to "Aayush" then only make Email field mandatory on form. This works when form submitted), for this I added code as below:

function addValidator(checkFieldname, fieldName, fieldLabel) {

    if (typeof (Page_Validators) == 'undefined') return;
    // Create new validator
    $("#" + fieldName + "_label").parent().addClass("required");

    var newValidator = document.createElement('span');
    newValidator.style.display = "none";
    newValidator.id = "RequiredFieldValidator" + fieldName;
    newValidator.controltovalidate = "casetypecode";
    newValidator.errormessage = "<a href='#" + fieldName + "_label'>" + fieldLabel + " is a required field.</a>";
    newValidator.validationGroup = "";
    newValidator.initialvalue = "";
    newValidator.evaluationfunction = function () {
        var valueToCheck = $("#" + checkFieldname).val();
        //Comparing a Text Value
        if (valueToCheck === "Aayush") {
            var value = $("#" + fieldName).val();
            if (value == null || value == "") {
                return false;
            }
            else {
                return true;
            }
        }
        else {
            return true;
        }

    };

    // Add the new validator to the page validators array:
    Page_Validators.push(newValidator);

    // Wire-up the click event handler of the validation summary link
    $("a[href='#" + fieldName + "_label']").on("click", function () { scrollToAndFocus(fieldName + '_label', fieldName); });
}

$(document).ready(function () {
    addValidator("firestname", "emailaddress1", "E-mail");
});

5.6   When code added save and close the form and refresh page and check your validation you created in the last steps

5.7 If you want to change the Label text, use the below syntax:

if (window.jQuery) {
    (function ($) {
        $(document).ready(function () {
            $('#fieldschemaname_label').text("This is the updated Label.");
        });
    }(window.jQuery));
}

1. 
   

5.8 Lock all fields on form:

    //Lock All Fields on Form:
    $("form").each(function () {
        $(this).find(':input').prop('disabled', true);
    });

5.9 For Liquid Template or OData Query visit : https://bit.ly/2DGulAF

5.10 For All other JavaScript/ Jquery references not mentioned in this post click

this link: https://bit.ly/2xMlRm7