Hyperlinks from bootstrap tables

[Hyperbytes]

As former hardcore hand coder (with assistance from fairly virgin dreamweaver) i decided to dip my toes into wappler as i have a larger project looming which was simply too big to fully hand code. Up to now I have been very happy with Wappler, paged/ filtered/ sorted bootstrap tables work well, google mapping simple etc.
However i can’t seem to work out how to do something normally simple which i would normally hand code in seconds.
How do i make an element in a bootstrap table into a hyperlink?

I want simple table entry to act as a link and pass the records unique ID to another page (edit form)

So effectively i was “Company Name” to become [a href='myform.php?ID={{ID}}]Company name[/a]"> where “Company Name” is the field content and and {{ID}} is the unique key for that record.

I am sure it is simple enough but I have spend hours trying to work it out adn I am going bonkers!!
Any assistance much appreciated

[brad]

Yes, you can do this in Wappler. Are you linking to another page? How far have you gotten or which part are you stuck on.

Depending on how far you have gotten the best way to achieve this may be to add your elements from the DOM panel.

[Hyperbytes]

The bootstrap table is working, haven’t started the edit form as i wanted to see how to pass the parameter first however i can quickly put a target update page together if needed (although need to get to grips with Bootstrap 4 form generator as I guess this is the way to go)

[brad]

• Create a blank link on the text you want linked. I personally use javascript:void(0); as my link.
• Then in Dynamic Attributes add a link
• Select Template from the dropdown at the bottom
• Type in your path to your update form followed by ?yourvariable=
• Then select the id column

You will end up with something like this:

[Hyperbytes]

It’s the :

Create a blank link on the text you want linked. I personally use javascript:void(0); as my link.

bit i am struggling with i guess. Is this done within the bootstrap 4 generator via the “Value” column?

[brad]

Select the text in your table cell you want to apply the link to. In your case the company name. Then simply click on the little link icon and you’re done.

[brad]

Here is a short video for you. Of course what you type in for the link and variable will differ but you will get the idea.

dynamiclink.mov.zip (23.3 MB)

[Hyperbytes]

I guess either i am somewhere else in the system or I am having a stup iday.

I am here

Video has just appeared , will have a look thanks

[brad]

Yes, the video shows step by step

[Hyperbytes]

Starting to think the problem, lies elsewhere. What you say is what I expected to be the process but I don’t get the same flow as you.
When selecting the table entry to link, the table text disappears.

When refreshed i go to dynamic attributes and it is still shown as Inner Text.Value and i have no links option in the dynamic links options.
In code view
[td dmx-text=“Account_Name”][a href="#"]#[/a][/td]
is being generated (< changed to [ to stop rendering on screen)

hyperlinking.mp4 (1.3 MB)

[brad]

Ah! Yes, you used the Bootstrap Table Generator. You need to make one small change in the code.

Change:

<td dmx-text="yourValue"></td>

To:

<td>{{yourValue}}</td>

[Hyperbytes]

Can’t thank you enough Brad, that sorted it perfectly.

The alternative coding method you suggested makes so much more sense to me than the former bootstrap generated code but i never expected to have to hack the code for a solution.

I can’t help but think that is a design flaw in the Bootstrap table generator though. The list to edit process is so fundamental to data management that a manual hack to the generated code should not be necessary to implement it. Perhaps something for the team to think about in future to either change the table code or at least add a conditional to the generator to give the user a choice between the present code or the linkable alternative
Thanks again Brad

[Teodor]

Hello @Hyperbytes,

There is no “hacking” required actually for what you need to achieve. In Wappler everything is done visually and you don’t need to manually alter the code.
Inner text property is used for purpose in table generator. This way the table rendering is really really fast and if there is some huge 50 columns table with thousands of records your page won’t suffer from FOUC

So all you need to do is:

1. Select your table cell and remove the inner text property
   

   

2. Double click in the table cell and click the data picker icon:
   

   

3. Select the data you want to bind:
   

   

4. Select the inserted binding and use the link icon to create a link out of it:
   

   

Then you can continue with setting up the dynamic link options.

[Hyperbytes]

Thanks Teodor, that makes sense. Guess i am still very much getting to grips with the Wappler approach but to date most of the experience has been very positive even if a bit of a culture change from hand coding in PHP!

[Moustapha]

I am not sure if this is the right topic, but I am having some issue inserting a dynamic link.
Please see the attached below:

The even if the link looks inserted it always returns “#” in the source code:

<h1><b><a href="#">{{serverconnect1.data.query2[0].ArtTitre}}</a></b></h1>

Does anyone know the reason why this is not working?

Thank you!

[Teodor]

Hi,
Where/to which attribute do you bind this dynamic link?

[Moustapha]

Hi @Teodor

I just created a query and then added the dynamic title to which I want to apply the dynamic link and bind the attribute from the same query. Is that correct?

[Hyperbytes]

Wappler can be a bit unforgiving when entering info into templates, the tendancy is to use enter to confirm the input but sometimes this doesn’t seem to work correctly. Try “tab” in place of “Enter” and this seems to work better for me in a lot of cases.

[George]

The even if the link looks inserted it always returns “#” in the source code:

<h1><b><a href="#">{{serverconnect1.data.query2[0].ArtTitre}}</a></b></h1>

Well Moustapha what you have done here is added a dynamic text and not link.
Your link stays # as there is nothing dynamic on your link tag - you just make the text inside it dynamic.

To make a dynamic link- you need to select the link and add a dynamic link attribute:

pick the link dynamic value

resulting in code as:

<a href="#" dmx-bind:href="serverconnect1.data.query2[0].ArtTitre">{{"serverconnect1.data.query2[0].ArtTitre}}</a>

[tomkomin]

I tried following your video but I only get Animation,Styling, and Display as options in dynamic attributes. What am I missing?

Also, is there a way to add multiple variables on a link that are pulled from a database (ie. home.php?a={{a_data}}&b={{b_data}}.