Okay
  Public Ticket #3368841
Is it possible to create a button for each row that redirects to a specific link ?
Closed

Comments

  • Aurélien GIRAUD started the conversation

    Hello TMS Plugin,

    I am Aurélien GIRAUD, digital project manager at Natural Santé and I would like some clarification on the capacity of Master Details Tables Addons.

    Natural Santé is a group that sells PHARMA and BIO products in B2B and our customers have access to a professional space to collect their invoices and have details on their orders.

    In this professional space, there is a table that summarizes the invoices of the connected customer and for each line, a button that redirect to the PDF invoice stored in our server (see attachment).

    Each invoice is accessible by a link in the format .../year/month/ID.pdf

    For example : .../2023/05/FF123456.pdf

    I starded a project to rebuild this personnal space with your plugin Wp Datatable and i have no problem for the order part but i have a question for the invoice part.

    Is there a way to recreate a button that redirects to a pre-established link for each invoice line ?

    For each row I can have the year, month and invoice ID, I can recreate this link. But I don't know if your Master Details Tables addon allows to turn this link into a button.

    Maybe a roundabout way to use your plugin?

    I'm turning to you because I haven't found a solution with the documentation or on the online tutorials. I just want to know if there is an option or a way to do this that I haven't thought of.
    Thank you in advance for the time you will devote to my request.

    Warmly,

    Aurelien GIRAUD

    Attached files:  table_invoices.PNG

  •  1,846
    Miloš replied

    Hi, Aurelien GIRAUD.

    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.

    -

    1. I am not sure if you need to combine a custom dynamic link that will combine parts of strings with multiple column values.

    If you need to do that, you can use our SQL Tables, with SQL CONCAT function,

    this can allow you to combine values from multiple columns and concatenate a string to make a dynamic column link.

    Please check more about this on this Tutorial example how to use CONCAT in our SQL Tables.

    -

    2. Or, if you wish a more simple way, to manually input each cell with a link to the PDF,

    then you can make hyperlinks.

    If you have one link per cell,  perhaps the easiest way is to use our URL Columns.

    They have specific rendering rules :

    Rendering rules: If the content of the cells contains a combination of “two sticks” – || – everything to the left of this combination is used as an URL address for the link, and everything to the right as displayed text. For example:

    https://wpdatatables.com||Check out wpDataTables

    will be rendered as: Check out wpDataTables

    If the “||” combination is not found in the content, the entire content will be used both for the link and as the display value. For example: https://wpdatatables.com will be rendered as: https://wpdatatables.com

    -


    Now, here is how you can make customizable buttons as links.

    When you create a URL Link column and set it to appear as a button, you need to add a custom class to it:

    4698826991.png

    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

    I hope this helps!



    2. Alternatively, you can use String Columns.

    They can render custom HTML,  in that case, you would have to wrap the links in the source data as HTML anchor tags, for example :

    <a href="https://www.w3schools.com">Visit W3Schools.com!</a>
    

    will be rendered as hyperlink of displayed text : " Visit W3Schools.com! "

     if you use String Columns, you will also be able to have multiple links in the same cell,  and combinations or images with links, etc ( if needed).

    -

    Let me know if that makes sense, and if you have any questions. Thankssmile.png



    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    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

  •   Aurélien GIRAUD replied privately
  •   Miloš replied privately
  •   Aurélien GIRAUD replied privately
  •   Miloš replied privately