Jump to content

KlisaN137

Members
  • Posts

    5
  • Joined

  • Last visited

  • Days Won

    1

KlisaN137 last won the day on September 17

KlisaN137 had the most liked content!

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

KlisaN137's Achievements

  1. Do you have some deployed DataPage on this, it would be helpful to see the whole thing?
  2. Alternately, if you want to show the parent field as "Display Only", but the DataPage doesn't permit using the Virtual Field element (Bulk Edit configuration, etc), set the field to "Text Field" and add the following code to the Footer of the Page (Bulk Edit Configuration): <script> if(typeof parentDisplayOnlyElement === "undefined"){ let parentDisplayOnlyElement = document.querySelector('input[name="BulkEditProductCategory"]'); // Select the input in the element you want to be just displayed parentDisplayOnlyElement.disabled = true; parentDisplayOnlyElement.style.border = 'none'; } </script>
  3. This hiding of the columns can also be achieved by using only JavaScript in the Footer: <script> document.addEventListener('DataPageReady', function (event) { let label = document.querySelector('table[data-cb-name="cbTable"] th:nth-of-type(8)'); // Select the label of eighth column let values = document.querySelectorAll('table[data-cb-name="cbTable"] td:nth-of-type(8)'); // Select all the values in the eighth column /* Removing the selected fields */ label.parentElement.removeChild(label) values.forEach(el => { el.parentElement.removeChild(el) }); /* If we want to remove additional columns */ label = document.querySelector('table[data-cb-name="cbTable"] th:nth-of-type(5)'); // Select the label of fifth column values = document.querySelectorAll('table[data-cb-name="cbTable"] td:nth-of-type(5)'); // Select all the values in the fifth column label.parentElement.removeChild(label) values.forEach(el => { el.parentElement.removeChild(el) }); }); </script> Main difference between this and approach with CSS is that here columns are entirely removed from the page, and not just hidden - in the CSS approach you could still find the elements if you inspect the page, and access the information in them, but in this JavaScript approach, they are completely removed from the page. Notice however, that in the above example we are first removing the column that comes after and work our way to the beginning. If we would also like to remove tenth column, we would put that code before the code for removal of the eighth.
  4. If we want to show some column in the Tabular Report just for the user who is also Administrator, but for the regular Users we want to hide it, below is the example (note that this is one Report DataPage - Tabular Report): Admin view can see the Agent Name column: User view can see the table without Agent Name column: In order to achieve this functionality, we need to add the following code to the DataPage Result page footer section: <script> document.addEventListener('DataPageReady', function (event) { /* If user is not Admin, we will remove the column */ if('[@authfield:Admin^]'==='No'){ /* We need to select Parent node of the Table Label and remove the desired child element (nth-child(2)) */ let agentLabelParent = document.querySelector('tr[data-cb-name="header"]'); let agentLabel = document.querySelector('tr[data-cb-name="header"] th:nth-child(2)'); agentLabelParent.removeChild(agentLabel); /* There can be multiple rows in the Tabular Report, so we need to select them all */ let agentNameParents = document.querySelectorAll('tr[data-cb-name="data"]'); /* Using the loop to pass through each row, and remove the entry (nth-child(2)) we don't need */ agentNameParents.forEach(parent => { let agentName = parent.querySelector('tr[data-cb-name="data"] td:nth-child(2)'); parent.removeChild(agentName); }); } }); </script>
  5. What you can do, if you want to use only one DataPage and show different navbars for users, is to have the "Users" table with the Yes/No field called Admin to check if user is Administrator, and to use Authentication based on the table. Then, make a Navbar in App Parameter like this: <p class="admin-navbar"> <a href="YOUR-URL">OPTION 1</a> <a href="YOUR-URL">OPTION 2</a> <a href="YOUR-URL">OPTION 3</a> <a href="YOUR-URL">OPTION 4 JUST FOR ADMIN</a> <a href="YOUR-URL">OPTION 5 JUST FOR ADMIN</a> </p> <p class="user-navbar"> <a href="YOUR-URL">OPTION 1</a> <a href="YOUR-URL">OPTION 2</a> <a href="YOUR-URL">OPTION 3</a> </p> We are making two Navbars, and we will filter out based on current user's field "Admin" which of these to show. So make a Footer in App Parameters with the following code: <script> document.addEventListener('DataPageReady', function (event) { /* We are selecting both navbars */ let navAdmin = document.querySelector('.admin-navbar'); let navUser = document.querySelector('.user-navbar'); /* We need to remove one only if both are present, this is to prevent console errors if reloading the page */ if(navAdmin && navUser){ let navParent = navAdmin.parentElement; '[@authfield:Admin^]'=== 'Yes' ? navParent.removeChild(navUser) : navParent.removeChild(navAdmin) } }); </script> Now just insert Navbar from App Parameters in DataPage Header section, and Footer from App Parameters into DataPage Footer section, and you'll see either admin-navbar or user-navbar based on the user authentication. Here is the result:
×
×
  • Create New...