In this post, I will show you how to use Java-Script in ADX Studio Portal.
Step 1: Login the portal by using Administrator Role. By default Admin's credential is:
UserId : Administrator
Password : pass@word1
Step 2: Now open the Web-Page on which you want to use JS.
Step 3: Click on Edit and go to Option section.
Here you can Write your JS.
There are list of some JS we can use on the Portal.
*************************************************************
Copy Paste the following code in your portal webpage...
Click Here to know, Apply Client Side validation in D365 Portal / ADX Studio Portal.
Click Here to know, Retrieve the data using Odata Query in D365 Portal / ADX Studio Portal.
Click Here to know, How to Disable open registration process in D365 Portal.
Step 1: Login the portal by using Administrator Role. By default Admin's credential is:
UserId : Administrator
Password : pass@word1
Step 2: Now open the Web-Page on which you want to use JS.
Step 3: Click on Edit and go to Option section.
Apply the JS OnLoad of WebPage :
$(document).ready(function(){
// Write JS code here
});
$(document).ready(function(){
// Write JS code here
});
There are list of some JS we can use on the Portal.
To Hide Tab :
var tab = $('table[data-name="Section_Name"]').closest('.tab');
var label = tab.prev('.tab-title');
tab.hide();
label.hide(); // Hides the tab's title
OR
$(".tab[data-name='TAB_NAME']").hide();
$(".tab[data-name='TAB_NAME']").prev().hide(); // Hides the tab's title
var tab = $('table[data-name="Section_Name"]').closest('.tab');
var label = tab.prev('.tab-title');
tab.hide();
label.hide(); // Hides the tab's title
OR
$(".tab[data-name='TAB_NAME']").hide();
$(".tab[data-name='TAB_NAME']").prev().hide(); // Hides the tab's title
To Show Tab :
var tab = $('table[data-name="Section_Name"]').closest('.tab');
var label = tab.prev('.tab-title');
tab.show();
label.show(); // Show the tab's title
OR
$(".tab[data-name='TAB_NAME']").show();
$(".tab[data-name='TAB_NAME']").prev().show(); // Hides the tab's title
var tab = $('table[data-name="Section_Name"]').closest('.tab');
var label = tab.prev('.tab-title');
tab.show();
label.show(); // Show the tab's title
OR
$(".tab[data-name='TAB_NAME']").show();
$(".tab[data-name='TAB_NAME']").prev().show(); // Hides the tab's title
To Hide Section :
$('table[data-name="Section_Name"]').closest('fieldset').hide();
OR
$(".section[data-name='tab_2_section_1']").closest("fieldset").hide();
$('table[data-name="Section_Name"]').closest('fieldset').hide();
OR
$(".section[data-name='tab_2_section_1']").closest("fieldset").hide();
To Show Section :
$('table[data-name="tab_2_section_1"]').closest('fieldset').show();
OR
$(".section[data-name='tab_2_section_1']").closest("fieldset").hide();
$('table[data-name="tab_2_section_1"]').closest('fieldset').show();
OR
$(".section[data-name='tab_2_section_1']").closest("fieldset").hide();
To Hide Field with Label:
$("#FIELD_NAME").closest("td").hide();
$("#FIELD_NAME").closest("td").hide();
To Show Field with Label:
$("#FIELD_NAME").closest("td").show();
$("#FIELD_NAME").closest("td").show();
To Hide Field without Label:
$("#FieldName").hide();
$("#FieldName").hide();
To Show Field without Label:
$("#FieldName").show();
$("#FieldName").show();
Check Visibility of Field:
var hidden = $("#alletec_portalproblemcategory").is(":hidden");
Value would be true or false, if true mean invisible. if false mean visible.
var hidden = $("#alletec_portalproblemcategory").is(":hidden");
Value would be true or false, if true mean invisible. if false mean visible.
Get value of Text Field :
var fieldValue=$("#FieldName").val();
var fieldValue=$("#FieldName").val();
Get Value of LookUp Field :
var entityName= $("#FieldName_entityname").val();
var lookupGUID = $("#FieldName").val();
var lookupValue = $("#FieldName_name").val();
var entityName= $("#FieldName_entityname").val();
var lookupGUID = $("#FieldName").val();
var lookupValue = $("#FieldName_name").val();
Get Option Set Value:
var value= $("#FieldName").val();
var value= $("#FieldName").val();
Set Value of Text Field :
$("#FieldName").val("Value");
$("#FieldName").val("Value");
Set Value of LookUp :
$("#FieldName_entityname").val(entityName);
$("#FieldName").val(lookupGUID );
$("#FieldName_name").val(lookupValue );
OR
$("#FieldName_name").attr("value",lookupValue );
$("#FieldName").attr("value",lookupGUID );
$("#FieldName_entityname").attr("value",entityName);
$("#FieldName_entityname").val(entityName);
$("#FieldName").val(lookupGUID );
$("#FieldName_name").val(lookupValue );
OR
$("#FieldName_name").attr("value",lookupValue );
$("#FieldName").attr("value",lookupGUID );
$("#FieldName_entityname").attr("value",entityName);
Set Option Set Value:
var value= $("#FieldName").val("Value");
var value= $("#FieldName").val("Value");
Enable Text Field Readonly :
$("#FieldName").attr('readonly', true);
$("#FieldName").attr('readonly', true);
Disable Text field Readonly :
$("#FieldName").attr('readonly', false);
$("#FieldName").attr('readonly', false);
Disable Text field :
$("#FieldName").prop('disabled', true);
$("#FieldName").prop('disabled', true);
Enable Text Field :
$("#FieldName").prop('disabled',false);
$("#FieldName").prop('disabled',false);
Check field is Enable or Disabled:
var disabled = $("#FieldName").is(":disabled");
value either be true or false. If true i.e field is disabled otherwise it is enabled.
var disabled = $("#FieldName").is(":disabled");
value either be true or false. If true i.e field is disabled otherwise it is enabled.
Disable LookUp Field :
$("#FieldName_name").parent().find('.input-group-btn').hide();
$("#FieldName_name").parent().find('.input-group-btn').hide();
Enable LookUp Field :
$("#FieldName_name").parent().find('.input-group-btn').show();
$("#FieldName_name").parent().find('.input-group-btn').show();
To Make Section Read-Only :
$('table[data-name="tab_2_section_1"]').closest('fieldset').find("input,button,textarea,select").attr("readonly", true);
$('table[data-name="tab_2_section_1"]').closest('fieldset').find("input,button,textarea,select").attr("readonly", true);
To Make Tab Collapsible :
// Replace TAB_NAME with your tab name.
// Collapsible tabs for TAB_NAME
$('h2:contains("TAB_NAME")').html("<span class='tabMargin'> TAB_NAME </span> <span id='collapseTabNameId' class='glyphicon glyphicon-triangle-top' style='float: right;margin-top: 2px;margin-right: 4px;'></span><span id='expandTabNameId' class='glyphicon glyphicon-triangle-bottom' style='float: right;margin-top: 2px;margin-right: 4px;'></span>");
// Hide Collapse Icon on load
$('#collapseTabNameId').hide();
// Show expand icon, hide collapse icon and show respective tab on click of collapse icon
$("#collapseTabNameId").click(function () {
$('#expandTabNameId').show();
$('#collapseTabNameId').hide();
$("div[data-name='TAB_NAME']").fadeIn(1000);
});
// Show collapse icon, hide expand icon and show respective tab on click of expand icon
$("#expandTabNameId").click(function () {
$('#collapseTabNameId').show();
$('#expandTabNameId').hide();
$("div[data-name='TAB_NAME']").fadeOut();
});
// Also add below CSS to look good, you can also change this based on your requirement.
.tab-title{
background-color: #e0dada;
font-size: 22px;
padding: 10px;
font-weight: bold;
}
.section-title{
font-size: 15px;
background-color: #f9f9f9;
padding: 6px;
}
// Replace TAB_NAME with your tab name.
// Collapsible tabs for TAB_NAME
$('h2:contains("TAB_NAME")').html("<span class='tabMargin'> TAB_NAME </span> <span id='collapseTabNameId' class='glyphicon glyphicon-triangle-top' style='float: right;margin-top: 2px;margin-right: 4px;'></span><span id='expandTabNameId' class='glyphicon glyphicon-triangle-bottom' style='float: right;margin-top: 2px;margin-right: 4px;'></span>");
// Hide Collapse Icon on load
$('#collapseTabNameId').hide();
// Show expand icon, hide collapse icon and show respective tab on click of collapse icon
$("#collapseTabNameId").click(function () {
$('#expandTabNameId').show();
$('#collapseTabNameId').hide();
$("div[data-name='TAB_NAME']").fadeIn(1000);
});
// Show collapse icon, hide expand icon and show respective tab on click of expand icon
$("#expandTabNameId").click(function () {
$('#collapseTabNameId').show();
$('#expandTabNameId').hide();
$("div[data-name='TAB_NAME']").fadeOut();
});
// Also add below CSS to look good, you can also change this based on your requirement.
.tab-title{
background-color: #e0dada;
font-size: 22px;
padding: 10px;
font-weight: bold;
}
.section-title{
font-size: 15px;
background-color: #f9f9f9;
padding: 6px;
}
Get LoggedIn User Information:
var userId = '{{user.contactid}}';
var userName = '{{user.fullname}}';
var userId = '{{user.contactid}}';
var userName = '{{user.fullname}}';
Get LoggedIn User Roles:
var roles = "{{user.roles}}";
console.log(roles);
var role = roles.contains("ROLE_NAME");
var roles = "{{user.roles}}";
console.log(roles);
var role = roles.contains("ROLE_NAME");
Get Count or No of records from a Sub-Grid on a Entity/Basic Form:
var rows = $("#ID_OF_GRID").find("tbody tr").length;
var rows = $("#ID_OF_GRID").find("tbody tr").length;
Get Count or No of records from a Entity List on a Web Page:
Register the function on load of List and use the below code to get the no of records. Replace the ENTITY_NAME with name of table.
var rows = $(this).children(".view-grid").find("tr[data-entity='ENTITY_NAME']");
Register the function on load of List and use the below code to get the no of records. Replace the ENTITY_NAME with name of table.
var rows = $(this).children(".view-grid").find("tr[data-entity='ENTITY_NAME']");
Get Query Parameter Data from URL:
var queryString = window.location.search;
if (queryString) {
var params = new URLSearchParams(queryString);
var nfa = params.get('Id');
}
var queryString = window.location.search;
if (queryString) {
var params = new URLSearchParams(queryString);
var nfa = params.get('Id');
}
Refresh the Entity List :
$(".entitylist.entity-grid").trigger("refresh");
$(".entitylist.entity-grid").trigger("refresh");
*************************************************************
Now I am showing How to set Contact Look Up based on User Login.
Copy Paste the following code in your portal webpage...
$(document).ready(function(){
// get user login info.
var userName = '{{user.fullname}}';
var userId = '{{user.contactid}}';
// set user info.
$("#FieldName").val(userId);
$("#FieldName_name").val(userName);
$("#FieldName_entityname").val("contact");
// Make the Look-Up Read Only
$("#FieldName_name").parent().find('.input-group-btn').hide();
});
// get user login info.
var userName = '{{user.fullname}}';
var userId = '{{user.contactid}}';
// set user info.
$("#FieldName").val(userId);
$("#FieldName_name").val(userName);
$("#FieldName_entityname").val("contact");
// Make the Look-Up Read Only
$("#FieldName_name").parent().find('.input-group-btn').hide();
});
Click Here to know, Apply Client Side validation in D365 Portal / ADX Studio Portal.
Click Here to know, Retrieve the data using Odata Query in D365 Portal / ADX Studio Portal.
Click Here to know, How to Disable open registration process in D365 Portal.
6 comments:
Nice blog post!!! Very informative and appreciable . keep posting
Best sap institute in India ,SAP online training & sap training courses
SAP ABAP on HANA Online Training
sap hana online training
sap S/4 HANA training online
SAP UI5 Online Training in India
Learn SAP online
sap fiori training online
sap fico training online
Thanks
This post is really nice and informative. The explanation given is really comprehensive and useful.
sap fi training
sap fico tutorial
Nice blog..
web designing course in chennai
online internships for civil engineering students
online internship for mechanical engineering
online internship for mba students
online internship for computer science students
online internship for biotech students
internships for ece students
internship for electrical engineering student
internship for ece students
Nice blog post!!! Very informative and appreciable . keep posting
what internship is all about
where to do internship
what internship should i do
How will internship benefit you
internship providing companies in chennai
internship program in chennai
How internship works
internship permission letter
internship with training
internship meaning in tamil
Wonderful post, This article have helped greatly continue writing ..
internship completeion letter , internship certificate online , internship offering companies , internship offer letter , internship acceptance letter , internship and apprenticeship difference , how many internships should i do , internship and inplant training difference , internship guidelines for students , why internship is necessary
Nice blog post!!! Very informative and appreciable . keep posting
Best Software Training Institute in Chennai
Computer Software Training Institutes in Chennai
Best Placement Training Institute in Chennai
Best IT Training Institutes in chennai with Placement
Software Training institute
Placement Training in Chennai
best training institute in chennai
placement training institute in chennai
best software training institute in chennai with placement
Post a Comment