You’re offline. This is a read only version of the page.
35
Hello everyone.
I would like to know if it is possible to use some kind of CSS reference (or javascript) to hide either a whole column or the values within a column in a entity-list on Portals. I am depended upon the value due to the fact that i am it in a filter criteria of the edit buttons in the entity-list (if the value is A show button A and hide button B - if the value is B hide button A and show button B). But the value serves no purpose for the user of the portal and i am afraid it just will confused them. I would therefore ask if it is possible to hide either a column or just the values with the column via some kind of reference using CSS?
I am rather new to CSS so do not know if it is even possible.
Hope someone can help
Thank you in advance
Best regards, Casper
*This post is locked for comments
Add . in options in entity list . It should work as above . I have already verified
[quote user="kavya11"]hi casperhartz
can you please share me the code how do you implemented hide values in a column in a entity-list with CSS?
thanks,
K.Kavya
[/quote]
Add . in options in entity list . It should work as above . I have already verified
[quote user="kavya11"]hi casperhartz
can you please share me the code how do you implemented hide values in a column in a entity-list with CSS?
thanks,
K.Kavya
[/quote]
I see - perfect. That was what I was looking for :)
thanks
best regards,
Casper
Hi Casper,
Since you're already using a Liquid template, just wrap the entity_list include in another div, with a specific class that you can target in your CSS.
<div class="hideFourthColumn">
{% include 'entity_list' key: "" %}
</div>
With that, then preface all of your td:nth-child and th:nth-child classes with .hideFourthColumn, and they will only apply to that entity list.
Nick
Thank you for the answer.
Right now, my problem is that I have 4 different entity-lists on one page, where I want to hide the values in a column - but only in the first table/list and not in all of them.
I would like to use CSS if possible and think it would be easier to stick to it if possible. By using td:nth-child and th:nth-child I manage to hide it – but in all 4 tables. I am using a liquid template to render the four entitylists by using {% include 'entity_list' key: "" %}. Now I need to only hide the fourth column in the first table and would like to ask if there is a way to “tag” only the first table. As I can see the list/tables all have the same <div class> being <div class = ”entitylist”> , but do not know if it is possible to tag the "key" of the list.
Best regards, Casper
Hi,
Yes, you can hide entire column, change specific value and do what you like to do. You just need to find the right tag/ code to achieve this. Below is the sample code I used to hide a column called application type & sessionid in the list. I am also doing some other stuff like hiding the Create button in certain condition, changing the redirect url of that create button based on app type i.e. apptype 1 open app type 1 create page and so on. There is also a code changing the edit/view action for each record based on the status of the record i.e. if in progress then resume link else view/readonly. Not sure if you can work out the exact code you need from it but it is worth to take a look.
If you still face any issue, post here your exact requirement.
==================
$(document).ready(function () {
$(".entitylist.entity-grid").on("loaded", function () {
var selectView = $("a[class='selected-view dropdown-toggle']");
var selectViewTitle = selectView.attr('title');
var showApplicationColumn = false;
if (selectViewTitle !== undefined) {
// Update link for "Open new application" based on view selected. If no view selected then hide the create button and show application colum
var createButton = $("a[title='Create']");
if (createButton !== undefined) {
var currentPath = createButton.attr('href');
if (selectViewTitle === "ApplicationType1") {
currentPath = currentPath.replace("application-bankguarantee-create", "application-ApplicationType1-create");
createButton.attr('href', currentPath);
}
else if (selectViewTitle === "ApplicationType2") {
currentPath = currentPath.replace("application-bankguarantee-create", "application-ApplicationType2-create");
createButton.attr('href', currentPath);
}
else if (selectViewTitle === "ApplicationType3") {
currentPath = currentPath.replace("application-bankguarantee-create", "application-ApplicationType3-create");
createButton.attr('href', currentPath);
}
else if (selectViewTitle === "ApplicationType4") {
currentPath = currentPath.replace("application-bankguarantee-create", "application-ApplicationType4-create");
createButton.attr('href', currentPath);
}
else {
showApplicationColumn = true;
createButton.hide();
}
}
}
// Update link for "View/ Resume" based on application status i.e. if in progress then go to resume application else open edit for in readonly mode
$(this).children(".view-grid").find("tr").each(function () {
var applicationType;
var statusReason;
var sessionid;
$(this).find("td").each(function () {
var elm = $(this).attr("data-attribute");
if (elm === "new_applicationtype") {
var applicationTypeValue = $(this).attr("data-value");
var obj = $.parseJSON(applicationTypeValue);
applicationType = obj.Value;
}
if (elm === "statuscode") {
var statusReasonValue = $(this).attr("data-value");
var obj = $.parseJSON(statusReasonValue);
statusReason = obj.Value;
}
if (elm === "new_sessionid") {
sessionid = $(this).attr("data-value");
}
});
// Update link path
if (applicationType !== undefined && statusReason !== undefined) {
var currentPath;
$(this).find("td").each(function () {
$(this).find("a[class='edit-link']").each(function () {
var currentPath = $(this).attr('href');
if (applicationType === 220970000) { // ApplicationType1
if (statusReason === 1) {
currentPath = "mycrmportal.org.au/.../application-applicationtype1-create; + sessionid;
$(this).attr('title', "Resume");
$(this).text('Resume');
}
else {
currentPath = currentPath.replace("all-applications-view", "application-applicationtype1-edit");
$(this).attr('title', "View");
$(this).text('View');
}
}
else if (applicationType === 220970001) { //ApplicationType2
if (statusReason === 1) {
currentPath = "mycrmportal.org.au/.../application-applicationtype2-create; + sessionid;
$(this).attr('title', "Resume");
$(this).text('Resume');
}
else {
currentPath = currentPath.replace("all-applications-view", "application-applicationtype2-edit");
$(this).attr('title', "View");
$(this).text('View');
}
}
else if (applicationType === 220970002) { // ApplicationType3
if (statusReason === 1) {
currentPath = "mycrmportal.org.au/.../application-applicationtype3-create; + sessionid;
$(this).attr('title', "Resume");
$(this).text('Resume');
}
else {
currentPath = currentPath.replace("all-applications-view", "application-applicationtype3-edit");
$(this).attr('title', "View");
$(this).text('View');
}
}
else if (applicationType === 220970003) { // ApplicationType4
if (statusReason === 1) {
currentPath = "mycrmportal.org.au/.../application-applicationtype4-create; + sessionid;
$(this).attr('title', "Resume");
$(this).text('Resume');
}
else {
currentPath = currentPath.replace("all-applications-view", "application-applicationtype4-edit");
$(this).attr('title', "View");
$(this).text('View');
}
}
$(this).attr('href', currentPath);
});
//Show Hide Workflow link
$(this).find("a[class='workflow-link']").each(function () {
if (!(statusReason === 1 || statusReason === 220970001)) {
$(this).parent().hide();
}
});
});
}
});
if (!showApplicationColumn) {
$("a:contains('Application Type')").parent().hide();
$('[data-attribute="new_applicationtype"]').hide();
}
$("a:contains('Session ID')").parent().hide();
$('[data-attribute="new_sessionid"]').hide();
});
});
==================
Hope this helps
So far i found that i could use td:nth-child and th:nth-child to some success, but would like to know if there is a better way and how i target a specific table (if there is more than one tabel / entity-list on the page).
Stay up to date on forum activity by subscribing. You can also customize your in-app and email Notification settings across all subscriptions.
#1
André Arnaud de Cal...
291,253
Super User 2024 Season 2
#2
Martin Dráb
230,188
Most Valuable Professional
#3
nmaenpaa
101,156
Share
Report
All responses (
Answers (