Create button/action that leads to external site; list view

Knack Community
1

How do I get from here… (screenshot of app page)

JobPostingNow
JobPostingNow911×412 37 KB

to here?! (created in photoshop) using custom CSS?

JobPostingHere
JobPostingHere921×452 35 KB

I am building a jobs posting app and I want to create an “Apply for this job” button in my list view that takes users to an external site (the job applications that are not hosted in Knack, but on Indeed, LinkedIn, etc.). I want the button to be tied to the record field that will have the link information.

Job application links can be rather long, so I want to hide the long links behind an “Apply for this job” button. I already have the CSS code for the look of the button. What I need is the CSS code to properly link the information from field to page view.

I know this will need custom CSS and I am having trouble finding a solution in the forms. Any developer help is appreciated. I am clearly not one.

2

Hi @Samantha

I think you can do most of this without css.

  1. Add an action link to the details view.
    image
    Trigger an Action

  2. Select the action link and edit the link text:
    image

  3. Select redirect to another website URL
    image

  4. Toggle the Use Custom Design Settings
    image

  5. Select “Fill”:
    image

  6. Select The size of the button:
    image

  7. Edit the colours and whether you’d like rounded edges or the button to be raised:
    image

image

You could use CSS to refine the button.
Hope this helps.

Craig

3

Hi Samantha

I’ve mis-read your request I’ll reply tomorrow with your solution.

Sorry

4

Hi Craig! Could you please provide this solution here if possible? I also need help on that.

Best wishes

Bruno

5

Hi Bruno

I’ll post a solution on Monday as I’m away at the moment.

Craig

6

Hi @Bruno1 @Samantha

I apologise for the delay in getting this to you.

Add the below code to your JS builder pane.

// Change view_8308 to your view the link is on
    $(document).on("knack-view-render.view_8308", function (_, { key: viewId }) {
        const viewElement = $(`#${viewId}`);
        // Change the field_5395 the the fieldId of your linkfield
        viewElement.find('.field_5395 a').addClass('kn-button is-secondary').text('Apply for this Job');
    });

You need to then add this to the css pane in the builder:

#knack-body .kn-content .is-secondary {
    background-color: #2e4c71;
    color: #ffffff ;
    border-color: #2e4c71;
}

You can change the colours and change the padding as needed inside this class.

In the list view click on the link field and change the Custom Format to hide label:

image

image

Any problems please let me know and I’ll try and help

Craig

7

Thanks a lot Craig!

1 Like