Solved

Format list View column with CSS/Javascript

  • 5 November 2018
  • 2 replies
  • 79 views

Badge +8

Hi All

 

Looking for some help from any CSS / Javascript experts... hopefully what I'm after can be done

 

I have a column in a list view which I want to give the illusion is a hyperlink field (but is really just a regular column).  I've changed the colour and font style to underline so it now looks OK but final touch would be to change the mouse pointer to the "hand" icon when I hover over this column

 

Can this be done via CSS / JavaScipt and if yes only be applied to this one column in the list view?

 

thanks for any help

Paul

icon

Best answer by RaymondJVR 12 November 2018, 11:15

View original

2 replies

Userlevel 2

Good day,


 


Please see below community post that can help with your query.


https://community.k2.com/t5/K2-Blackpearl-Forum-Posts/Hyperlink-control-text/td-p/71496


 


Kind regards


Themba

Userlevel 4
Badge +13

Good day Psturmey


 


The best solution for this would be to inject some JavaScript code that will call a blank link, this way the column of the list view will have all the capabilities of a hyperlink except the actual redirection displaying the behaviour as described in the requirement of this post. To do this please follow the below step by step guide.


 


Guide:



Step 1:


Add a new blank column into the list view and change the control to a data label if it is not set to one by default.


Step 1.1: Select the column that you want the hyperlink emulation to be on.


Step 1.2: Select that columns "column" tab in the properties window


Step 1.3: Add an new blank column using the   "Insert column" options.


Step 1.4: Drag and drop a new data label from the control toolbox to the newly added column.



Step 1.5: Change AddEdit control from data label to Text Box using the  "change control" option.



  


Step 2:


On the text box control from step 1.5, add a rule on it that will transfer its data from the text box to the addedit control for the column you wanted the hyperlink emulation to take place on.



 


Step 3:


On the column that was added in step 1.2 add the following expression (Replacing the "Replace with smo" section with the SmartObject value of the column you wanted to add the hyperlink emulation too initially). When adding the Expression tot the control keep in mind that the control must be set to literal enabled and prevent xss needs to be unchecked.


 


<a href="javascript;">Replace with smo value</a>



Step 4:


Hide initial column on Body, Header and Column level. Do the same with the AddEdit control for that column.



Step 5:


Save, Finish and Run


 


Result:



 


*Note: Purely using JavaScript to achieve the same behaviour will work to emulate a hyperlinks behaviour with all hyperlink functionality except that actual redirection on a list view however to injecting it into a list view would make the JavaScript snippet quite large as you need to determine the exact column and then target a specific cell in each row to which the injected needs to be added, this will be very tedious.  



Should you feel that this post is of use and or an accurate solution to the raised question, I kindly encourage you to mark it as such using the 'Mark as Solution', 'Kudo' andor ‘Me Too’ options.


 


Kind Regards


Raymond


 

Reply