Easiest way to fire an event when a Link is clicked

Liberty Create
1

Is there an easy way to fire an event when a link is clicked.

Currently this is where I’m at…

  • Option 1: Build a presenter
    I’m writing a presenter at the moment, but its taking more time than I want.
    I’ve got it to trigger the event, but its not opening the Link :frowning:
  • Is there an existing presenter to do this? or something similar I can amend.
  • Or do I have other options?

Many Thanks
JonathanFS

2

Could you use the action link element and then set the Redirect after action value? Or for your presenter could you use cs.redirect after the cs.fire_event?

3

Thanks, but I want to stay on the same page and open the link in a new tab.

However I did build a new presenter titled Fire Event from Link which is working as I want.

So I will leave the code here for the full VUE.JS component as this may help somebody else in the future. I’ve not doubt it could be written better; suggestions welcomed.

main.js

/* Main server-side presenter code */

/*

-----------------------------------------------------------------------------------------------------------------------

Author:         JFS

Date:           12/06/2026

Developed By:   East Hampshire District Council

-----------------------------------------------------------------------------------------------------------------------

Presenter Name: Fire Event from Link

Version:        v1.0

Information:    Presenter to use on Base Format: Link

                User can i) select an event to fire and 2) select a field path to a Link property.

                - Event: Send Message

                - URL field: https://www.google.co.uk/

                When user clicks this link, the Link is opened in a new window, and selected event is triggered.

----------------------------------------------------------------------------------------------------------------------

*/

let debug = true;

return {

get_template_data: function () {    

    const recordId = presenter.get_fragment_record_id();

    const record = cs.record(recordId);

    if (debug) cs.log('\*\*\* Presenter: Fire Event from Link v1.0 \*\*\*');

    if (debug) cs.log('> recordId: ' + recordId);

    if (!recordId) return false;

    // URL Field --> URL

    let url = null;

    const urlField = presenter.get_setting("url_field");

    if (debug) cs.log('> urlField: '+urlField);

    if (urlField) {

        const parts = urlField.split(':');

        const fieldPath = \`:${parts\[1\]}\`;

        url = record.get(fieldPath);

    }

    if (debug) cs.log('> URL: ' + url);

    const eventID = presenter.get_setting("event");

    const reloadPage = presenter.get_setting("reload_page");

    return {

        recordId: recordId,

        url: url,

        eventID: eventID,

        reloadPage: reloadPage

    };

},

action_fire_event: function (params) {

    const recordId = presenter.get_fragment_record_id();

    const eventID = params.eventID;

    if (!recordId || !eventID) {

        cs.warn("Missing recordId or eventID");

        return { success: false };

    }

    if (debug) cs.log('> Firing event: ' + eventID);

    cs.record(recordId).fire_event(eventID);

    return { success: true };

},

get_settings: function () {

    return {

        event: {

            main_label: "Event to Fire",

            base_format: "choice",

            choices: cs.build_choices('event'),

            settings: { required: true }

        },

        url_field: {

            main_label: "URL Field",

            base_format: "field_path",

            settings: { required: true }

        },

        reload_page: {

            main_label: "Reload Page",

            base_format: "boolean",

            settings: { default_value: true }

        }

    };

}

}

frontend.js

/* frontend JS */

/*

Author:         JFS

Date:           12/06/2026

Developed By:   East Hampshire District Council

*/

export default {

props: [“recordId”, “url”, “eventID”, “reloadPage”],

mounted() {

console.log("Mounted recordId:", this.recordId);

console.log("Mounted url:", this.url);

console.log("Mounted eventID:", this.eventID);

console.log("Mounted reloadPage:", this.reloadPage);

},

methods: {

fireEvent() {

  console.log("Click fired");

  this.trigger_action('fire_event', { eventID: this.eventID }, (e) => {

    if (e.result === "success" && e.response.success === true) {

      console.log("Event fired successfully");

      // open the policy link in a new tab

      if (this.url) {

        window.open(this.url, '\_blank');

      }

      // reload calling page (only if enabled)

      if (this.reloadPage) {

        window.location.reload();

      }

    } else {

      console.error("Event failed:", e.response);

    }

  });

}

}

};

main.html

<a href="#" @click="fireEvent">Read Policy {{ recordId }}</a>

styles.css

a {

color: #0078d4;

text-decoration: underline;

cursor: pointer;

}

a:hover {

color: #005a9e;

}

config.json

{

“main”: “main.js”,

“frontend”: {

"vue": \[

  "frontend/frontend.js",

  "frontend/main.htm",

  "frontend/styles.css"

\]

}

}

All the best
JonathanFS

1 Like
4

Looks good to me. You might want to move the “if (!recordId) return false;” line in main.js above the const record = cs.record(recordId); to prevent it throwing an error/problem in newer version of create if there is no recordID

5

Good spot, Thanks Ali.
I did add it, but in the wrong place - doh.