Clickable words in text field

0
Hi Mendixers,   I have a challenge I hope we can solve: how to make a textbox in which every word is a hyperlink that triggers a microflow with the word as an input value.   The goal of the app is to help people read Chinese articles. Whenever a user taps a single word in the article, it should trigger the word to be looked up. The dictionary is already in place and functioning, I just need the microflow to be triggered when a word is tapped. As a sidenote, Chinese doesn't have any spaces. Therefore, the phone's dictionary should be used to determine which (sets of) characters are words.   I think a custom widget can do the trick, but please also tell me if you know a better solution!   Kind regards,   Paul
asked
1 answers
2

Hello Paul, 

You should be able to do this through an HTML snippet using js or jQuery, see bellow an example with JQuery:


//Here we create an event for clicking on paragraph elements, I suggest using span instead if it's meant to be individual words
jQuery( "#ContainingDivID p" ).on( "click", function() {
//We extract the text from the element clicked - Works for <p> elements, to be tested on <span>
  var microflowInputString=jQuery( this ).text();
//We create a new object of a new entity because the Mendix client API doesn't have an interface for strings being given as an input into microflows
mx.data.create({
    entity: '<ModuleName>.<EntityName>',
    callback: function(obj) {
    //We set the word from the form as a attribute part of your new entity, I used "Word" as an example, make sure this matches your new entity
     obj.set('Word',microflowInputString);
    mx.data.action({
    params: {
        applyto: "selection",
        actionname: "<ModuleName>.<MicroflowName>",
        guids: [ obj.getGuid()],
        origin: this.mxform    
    },
    error: function(error) {
        alert(error.description);
    }
});
    },
    error: function(e) {
        console.log('an error occured: ' + e);
    }
});
});

 

I'm assuming that you can split your words into several separate elements so jQuery can actually detect the individual clicks (i.e. <div id = "MyTextArea"> <span>word1</span> <span>word2</span> </div>).

I've used similar code before but haven' tested the above, keep in mind you will most likely have to adjust it and perhaps debug it. 

Hope this is of some use to you, I commented the code as best as I could to make it easy to understand.

 

answered