In reactive web application how to highlight only search word from content but not all content? Is it possible to do this without JS?

Hi Bojana,

I am not sure without JS it is achievable, anyhow JS will be required to apply the CSS through innerHtml. 

Thanks,

Sachin

Sachin Mahawar wrote:

Hi Bojana,

I am not sure without JS it is achievable, anyhow JS will be required to apply the CSS through innerHtml. 

Thanks,

Sachin

 Do you have maybe solution for this with JS? And where to put that JS in reactive web app expression?

 

Bojana Ulic wrote:

In reactive web application how to highlight only search word from content but not all content? Is it possible to do this without JS?

 

 Hi Bojana,

Can you share screenshot, it will be easy to understand your problem.

Vijay Malviya wrote:

Bojana Ulic wrote:

In reactive web application how to highlight only search word from content but not all content? Is it possible to do this without JS?

 

 Hi Bojana,

Can you share screenshot, it will be easy to understand your problem.

 

 This is reactive web app and I want in this case only to highlight only 1896 instead of all expression. For this I have now I have only code in style classes for expression like this:

I think the better way is to divide for exemple 1896+19 in two expressions and give the CSS only for the first.

Hi Bojana,

Consider the use of the html mark tag.

Create a function something like this with two input parameters: Value, Search, and one Output parameter TaggedSearchValue. Set the IsFunction property true.

Set the expression in your table to this function and pass the attribute and the search argument.

In the function, replace set TaggedSearchValue = "<tag>"+seach+"</tag>" + Replace(Value, Search, "")

Regards,

Daniel 

Daniël Kuhlmann wrote:

Hi Bojana,

Consider the use of the html mark tag.

Create a function something like this with two input parameters: Value, Search, and one Output parameter TaggedSearchValue. Set the IsFunction property true.

Set the expression in your table to this function and pass the attribute and the search argument.

In the function, replace set TaggedSearchValue = "<tag>"+seach+"</tag>" + Replace(Value, Search, "")

Regards,

Daniel 

 Ok Daniel I have some small question I make function

I set value in that function


 


I don't know this part 

Set the expression in your table to this function and pass the attribute and the search argument.

How to set this expression to this function?

Thank You Daniel

So on your screen 

The TicketId expression is directly pointing to the current record Ticket id. replace this with the call to your function passing in the current expression value and the search argument. You will only be able to use your server action here if you set the Is Function property of the server action to true.

Daniël Kuhlmann wrote:

So on your screen 

The TicketId expression is directly pointing to the current record Ticket id. replace this with the call to your function passing in the current expression value and the search argument. You will only be able to use your server action here if you set the Is Function property of the server action to true.

 

 Maybe I do something wrong but with this I get this resultSo I get client action like thisAnd I set Is Function to true. Could you please tell what is wrong here and why I don't get text with only higlighed search text?

Thank you Daniel

Hi again,

Ok you are building reactive web. You have to look at the solution in the next post to render correctly customized html in a reactive web app:

https://www.outsystems.com/forums/discussion/53973/expression-escape-content-in-reactive-web/

In the past with traditional web only a property on the expression was enough to get this working. With ReactJS used by OutSystems this is a bit different, the post I shared explains how to do it.

Regards,

Daniel

Daniël Kuhlmann wrote:

Hi again,

Ok you are building reactive web. You have to look at the solution in the next post to render correctly customized html in a reactive web app:

https://www.outsystems.com/forums/discussion/53973/expression-escape-content-in-reactive-web/

In the past with traditional web only a property on the expression was enough to get this working. With ReactJS used by OutSystems this is a bit different, the post I shared explains how to do it.

Regards,

Daniel

 If I good understand instead of client action with that Assign now I have client action with JS. Something like this

 And that action I call in expression? And in that case could you please tell me what is JS code that I could put  to highlight search text because I am not that good in JS?

Regards,

Bojana

Yes I can, if you have patience, I can do later today, busy now with my day job..

In the meantime you could also have a look and try to use this component build to ease the injection of custom html in reactive web app:

https://www.outsystems.com/forge/component-overview/7239/injecthtml


Daniël Kuhlmann wrote:

Yes I can, if you have patience, I can do later today, busy now with my day job..

 Yes ofcourse Daniel I will wait for your answer 

Regards

Bojana



 

Hi Bojana,

See attached an uploaded example application demonstrating the automatically marking of the search text in a column of a table (in yellow) while typing in the search keyword. I used the block provided by component:

https://www.outsystems.com/forge/component-overview/7239/injecthtml

So to test the app that Forge component needs to be installed first.

Also I used the https://www.outsystems.com/forge/component-overview/4145/outsystems-sample-data

for the screen so you need that installed too.

There is one client action used to insert the <mark</mark> tag around the search text, and that result is passed to the InjectHTML block.

If you have further questions, don't hesitate to ask,

Regards,

Daniel

Daniël Kuhlmann wrote:

Hi Bojana,

See attached an uploaded example application demonstrating the automatically marking of the search text in a column of a table (in yellow) while typing in the search keyword. I used the block provided by component:

https://www.outsystems.com/forge/component-overview/7239/injecthtml

So to test the app that Forge component needs to be installed first.

Also I used the https://www.outsystems.com/forge/component-overview/4145/outsystems-sample-data

for the screen so you need that installed too.

There is one client action used to insert the <mark</mark> tag around the search text, and that result is passed to the InjectHTML block.

If you have further questions, don't hesitate to ask,

Regards,

Daniel

 Daniel it is work fine I try it on my personal environment , but in my project they want solution without forge . They want me to use JS or something else but not forge. Do you maybe have solution for these case?

 

Bojana,

Well I don't see the problem sing the forge component is it just uses javascript, css3 and html. You can open in it in Service Studio, copy over the functionality and be done with it. Or if you are not allowed to copy it over then you rebuild the logic based on the Forge component.

The Forge is great that you don't have to build, and test everything yourself. It took me 10 minutes to make your app with the use of the Forge component. Time is money!

The idea of OutSystems is to build fast, you do that with reusing pre-build components that already have been tested. Or you build slow by doing it all by yourself. It is your choice.

Regards,

Daniel

Solution

Hi Bojana,

Here is a version of my application that demonstrates how to do it without using a reference to a Forge component. I basically copied in the InjectHTML block from the Forge component in my application. It is a ini-mini-tiny block with an OnRender event handler with a one line JavaScript.

So now you should be able to use my solution, as you are no longer using a Forge component (which again, doesn't make sense to me, but that is a different discussion).

Regards,

Daniel

Solution

Daniël Kuhlmann wrote:

Hi Bojana,

Here is a version of my application that demonstrates how to do it without using a reference to a Forge component. I basically copied in the InjectHTML block from the Forge component in my application. It is a ini-mini-tiny block with an OnRender event handler with a one line JavaScript.

So now you should be able to use my solution, as you are no longer using a Forge component (which again, doesn't make sense to me, but that is a different discussion).

Regards,

Daniel

 Daniel this help me a lot. I have one more question how to make this action which mark word 

TagSearchText

case insensitive? Because now highlight only when I write word with exactly right letter from text?

 

Hi Bojana,

Yes that is possible, I tried, but had to replace the OutSystems Replace() with a Javascript replace using a regex pattern to ignore the case sensitivity:

Although the marking now works case insensitive, my quick change replaces the actual search keyword with the entered keyword in the marked text. So "Some" if search on "som" will be replace with som.

Probably can be made smarted, but I don't have the time for that.

Regrds,

Daniel

Daniël Kuhlmann wrote:

Hi Bojana,

Yes that is possible, I tried, but had to replace the OutSystems Replace() with a Javascript replace using a regex pattern to ignore the case sensitivity:

Although the marking now works case insensitive, my quick change replaces the actual search keyword with the entered keyword in the marked text. So "Some" if search on "som" will be replace with som.

Probably can be made smarted, but I don't have the time for that.

Regrds,

Daniel

 Daniel this result of is not good for my case or I did something wrong. I use your JS and after that assign like this:

  and this is my result:

This code highlight my all sentences but not only search word

Hi,

Sorry for the late reply, maybe you did something wrong.

Here is my version attached that works with the limitation I already mentioned in my previous reply.

Regards,

Daniel