Hey there, Awesome Customers!

Just a heads up: We'll be taking a breather to celebrate International Workers' Day (May 1st and 2nd - Wednesday and Thursday) and Orthodox Easter from Good Friday (May 3rd) through Easter Monday (May 6th). So, from May 1st to May 6th, our team will be off enjoying some well-deserved downtime.

During this time, our customer support will be running on a smaller crew, but don't worry! We'll still be around to help with any urgent matters, though it might take us a bit longer than usual to get back to you.

We'll be back in action at full throttle on May 7th (Tuesday), ready to tackle your questions and requests with gusto!

In the meantime, you can explore our documentation for Amelia and wpDataTables. You'll find loads of helpful resources, including articles and handy video tutorials on YouTube (Amelia's YouTube Channel and wpDataTables' YouTube Channel). These gems might just have the answers you're looking for while we're kicking back.

Thanks a bunch for your understanding and support!

Catch you on the flip side!

Warm regards,

TMS

Okay
  Public Ticket #3488157
Column URL link with conditional button text
Closed

Comments

  • Jose started the conversation

    I have a column with links like this example below: 

    https://s3.amazonaws.com/AWSProd/sites/raypakcom/documents/6000.18.20.pdf
    https://s3.amazonaws.com/AWSProd/sites/raypakcom/documents/100-10000378.pdf

    https://www.example.com

    What I want to do is use some type of conditional text inside the button. Fro example if the link contains .pdf I want to display text button "download pdf". If the link does not contain .pdf I want to display "link URL" or some text of my choosing. has anyone come up with a solution for this?

    Attached files:  Screenshot 2023-09-28 at 2.17.12 PM.png

  •  1,694
    Miloš replied

    Hi Jose,

    Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.

    -

    This will not be possible if you use an "URL Link" type Column,

    because if you set it in the Data Tab to be "Show link as a button" , then you can only choose one/same button text for all buttons in that Column.

    4426528571.png

    -

    But if you use a "String" type Column, we will try to think of a way with a Conditional Rule if it's possible.

    6042552218.png

    So if we add your lines/rows in a String Column, they will be like :

    2707407854.png

    Now, if we make a Conditional Rule,

    such as  : If any cell of this Column contains "pdf"  , then 'transform the value of the cell to this';

    You would be able to transform the value of the Cell to any custom HTML you need,

    such as wrap everything inside a HTML anchor Tag,  something like :

    <a class="custombtn" href="https://https://s3.amazonaws.com/AWSProd/sites/raypakcom/documents/6000.18.20.pdf">Download PDF</a>
    

    Note we added a custom Class here, as 'custombtn'.

    Later, in the Custom CSS of the Table, in Table's Customize/Custom CSS,

    add this :

    .custombtn { 
      background-color: blue !important;
      color: white !important;
      padding: 14px 25px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
    }

    Then, it will transform any cell that has "PDF" in that link looking as a button.

    2637878894.png
    8343366635.png

    But unfortunately, this looks for any cell that has "pdf" ,  so the link can not be set to different links with this Conditional Rule, in this case both of these cells will have the same URL link.

    So at the moment, i am truly sorry, but as you see, we do not have a valid solution to adding a conditional that can keep the same URL link ,

    but to just change the hyperlink displayed text "in the case when it ends with a PDF extension".

    This is a nice idea for a future solution, though.

    At this time, we don't have any built-in solution to achieve this, but you can suggest it to our developers - they will do their best to make a solution in the future.

    Please feel free to search on our suggestions page

     to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there,  and as more people vote, the feature will move higher on the priority list.

    You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;

    and our newsletter, so you're informed about new features, bug fixes, freebies, etc.

    -

    If you have coding skills and wish to try to make a custom solution now,

    you can check out our available hooks for Developers on this documentation and see if you can find any hook that might help.

    Please be advised that custom solutions with hooks are not included in our support.

    You can also research resources such as Stack Overflow to see if any other user perhaps found a workaround.

    ( We do like to give examples for certain solutions, but for this use-case, we, unfortunately, don't have anything yet)

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •  1,694
    Miloš replied

    Hi Jose,

    Sorry, i just forgot to add, there might be a different way for you to achieve the same scenario,

    it just includes more manual work from your end,

    without the Conditionals.

    -

    Perhaps it will be easier for you to simply input Custom HTML with a CSS class as i did for your first cell,

    we will just change how we name this class, for example something like "pdflink" or any other name,

    so in the first cell you can input  :

    <a class="pdflink" href="https://https://s3.amazonaws.com/AWSProd/sites/raypakcom/documents/6000.18.20.pdf">Download PDF</a>
    

    And then, use this CSS:

    .pdflink { 
      background-color: blue !important; 
     color: white !important; 
     padding: 14px 25px;
      text-align: center; 
     text-decoration: none; 
     display: inline-block;}

    You can add much better looking styles for your links, here is how :

    First name your custom Class in any cell for any link.

    Then, visit this website, generate your button, and click on "Get Code":

    6639315205.png

    In the right part of the screen, you'll see the code you need for this button:

    9848024905.png

    Copy the code without the first row and change "myButton" to the custom class you added in step 1, so instead of this:

    .myButton {
    	background-color:#51d1c6;
    	border-radius:28px;
    	border:1px solid #1995ab;
    	display:inline-block;
    	cursor:pointer;
    	color:#ffffff;
    	font-family:Arial;
    	font-size:17px;
    	padding:16px 31px;
    	text-decoration:none;
    	text-shadow:0px 1px 0px #2f6627;
    }
    .myButton:hover {
    	background-color:#5a9615;
    }
    .myButton:active {
    	position:relative;
    	top:1px;
    }

    You would use this:

    .customclass {
    	background-color:#51d1c6;
    	border-radius:28px;
    	border:1px solid #1995ab;
    	display:inline-block;
    	cursor:pointer;
    	color:#ffffff;
    	font-family:Arial;
    	font-size:17px;
    	padding:16px 31px;
    	text-decoration:none;
    	text-shadow:0px 1px 0px #2f6627;
    }
    .customclass:hover {
    	background-color:#5a9615;
    }
    .customclass:active {
    	position:relative;
    	top:1px;
    }

    In the table, go to Customize/Custom CSS and paste that code:

    5662287483.png

    Notice that the font color had to include the !important clause to override the color of the text in the button. After you add this, the button in the table will look like this:

    4803006689.png


    Then, for your other cell, use the same HTML format, just change your link inside the a href , like :

    <a class="pdflink" href="https://https://s3.amazonaws.com/AWSProd/sites/raypakcom/documents/6000.18.20.pdf">Download PDF</a>
    

    So in that cell we just place a different URL link, but wrap it inside same HTML link format,

    and add the same class as "pdflink".

    Then this cell will also render as hyperlink, looking as a button with "Download PDF" text.

    -

    And in another cell, you can just input the same HTML format, but if there is no PDF,

    then let's just use the HTML a href, without any Displayed text, so :

    <a href="https://www.example.com">other link displayed text</a>

    And it looks like this :

    5715692348.png

    I hope this can help to at least provide some examples of alternate ways what you can try.

    But for that Conditional Logic, we still don't have something like that.

    Thank you.

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables