psturmey
Apprentice

Format list View column with CSS/Javascript

Jump to solution

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

0 Kudos
Reply
2 Replies
Themba
Apprentice

Re: Format list View column with CSS/Javascript

Jump to solution

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

0 Kudos
Reply
RaymondJVR
Nintex Employee
Nintex Employee

Re: Format list View column with CSS/Javascript

Jump to solution

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:


Spoiler

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 6957i9209BE7B9A0F161D.png  "Insert column" options.


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


6962iC477F978144ACE3B.png


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


6961i90E13427AC7D3AEC.png


  


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.


6963i83097A54A7D3306F.png


 


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>

6964iF5BE3BC895073CF9.png



Step 4:


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


6965iC7249557828EB8CB.png


Step 5:


Save, Finish and Run


 


Result:


6966i040BE330C9561B2C.png


 


*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