Skip to main content

It seems impossible to achieve this through K2 form setting. Please help, thanks!

Hi there  @crazymind, 


 


If you would you can refer to this post


In there the first scenario solution I described is how to inject custom CSS code into your form by doing the following:



  1. Add a Data Label onto your form:

    • Set it to Text 



  2. Make sure these settings are set on your Data Label:


    • Literal: true

    • Prevent XSS: false



  3. Add a custom expression to the Data Label with code simililiar to this:

    • <link rel="stylesheet" type="text/css" href="/Designer/Styles/Themes/Lithium/Test.css">

      • There are 2 parts in this code that will depend on you - namely your path and your CSS name. (Designer in this case is refering to K2 Designer which is in your K2 root folder.)

      • I am using the Lithium theme in this case hence why my custom CSS is inside the Lithium theme folder.





  4. Make a custom CSS file in the above mentioned file path:

    • For your table border it would be something similiar to 


    • (the selector of the control you would like to add the border to){
      border: 1px solid black;
      }

      Example:
      SFC SourceCode-Forms-Controls-Web-TextBox{
      border: 1px solid black;
      }




  5. Clear your cache and refresh - your changes should now be there and you should be able to click the bar to collapse the view.


Since it's custom code injected into a specific form you will have to do this entire process for every form where you want the code applied.  Furthermore you should make sure to do compatibility testing on whatever devices you might add this too. 


 


Additionally you can get a selector by using the Google Inspect tool but be careful when using specific ID selectors, this depends on your usage however. The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one. For more information please read here.


 


Lastly please note: As this is custom code it will not be supported by K2 Support. 


 


Hope this helps!


 


@  @Esmari

Can I achieve this?I just need to show the table border in my item view. Which properties should I change in the css file ?  In my case, I have two designer folders (k2 smartforms Designer andk2 smartforms Runtime). Which folder am I supoose to put this css file? Thank you again.


 
 
 
 
 
 
 
 
@Esmari Thank you very much for your solution.  I have no idea why your solution doesnt work in my case
.
 

This is an absolute path where I put my Test.css file: 

C:Program FilesK2K2 smartforms DesignerStylesThemesLithium

 

The snapshot below shows how I set my expression. (follow your instruction)

 

 

 

 

I've also clean my cache. I cant see any cell border after I click Runtime URL. Where did I went wrong? Please help, thanks!


Hi  @crazymind ,


 


So assuming you set the properties right on the data label then the only issue I see is your path.


Your path will be the same as my example since you put it in the same place and called it the same name, so please change your expression to: <link rel="stylesheet" type="text/css" href="/Designer/Styles/Themes/Lithium/Test.css">


 


You don't have to put "K2 smartforms Designer" in the path as my physical path looks the same as yours yet the above expression works perfectly. 


 


Let me know if that helps.


 


 


@Esmari Man, You are my hero. That looks perfect to me. CHEERS!


Reply