Inject HTML using javascript

Hi,

In mobile application, I am creating HTML string in client action and using javascript to inject it in Div.

I am able to do it but facing issue while adding space using   

As it's printing   in HTML. How to inject space in HTML string?


Best Regards,

Nitin

mvp_badge
MVP
Solution

Hi Nitin,

As per my understanding for the mentione use-case. I would suggest you to try with the following steps.

Steps to follow:

1) Store the below mentioned expression value in a client action local variable (lets call it - StepTitleVar)

If(Length(FilterTranslation.FilteredList.Current.LocalTranslation.Header) > 15, Substr(FilterTranslation.FilteredList.Current.LocalTranslation.Header,0,15) + "..", FilterTranslation.FilteredList.Current.LocalTranslation.Header)

2) In the JS node pass the local variable (StepTitleVar) value as input parameter

var  StepTitleLabel = $parameters.StepTitleValue + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0'; // append extra space

document.querySelector("#" + $parameters.StepTitleDiv).innerText = StepTitleLabel;


If this is not what you are looking for, then I would request you to share a little bit more details (.oml or JS snippets) about your implemenation.

Hope this helps you!


Kind regards,

Benjith Sam

Hi @Benjith Sam ,

1. Yes we are storing expression value in local variable.

2. We are injecting local variable using javascript.

Extra spaces need to be added in between of HTML string. Based on that I am generating HTML string.

So we can't add spaces in javascript directly.

While generating HTML string I am adding for space but it's printed as it on screen. If I use \xa0 in string then it's printed \ on screen.

Best Regards,

Nitin

mvp_badge
MVP

Hi Nitin,

Thank you for sharing additional information. I have tried to implement the same use-case and it's working as expected for me.

See this sample screen: Add WhiteSpace JS_Task

Use the same Non-breaking Space character without semicolon (;) as shown below


JavaScript Snippet

document.querySelector("#" + $parameters.OutputCntrId).innerHTML = $parameters.InnerTextValue;


Hope this helps you!


Kind regards,

Benjith Sam

Thanks @Benjith Sam!

Got the problem, I am using FormatText method for right padding. Last parameter is padding_char. It's expecting char and I have provided string so- 

Defect is in FormatText method, in case of & nbsp it's taking '&' and in case of \xa0 it's taking '\' as padding char.
Now I am providing '^' as padding char and in JavaScript doing str.replaceAll('^','\xa0').
It's working as expected.

Best Regards,

Nitin

mvp_badge
MVP

It was new learning for me as well.. Hurrah!

Thank you Nitin for sharing this information with us :)


Kind regards,

Benjith Sam

Hi @Goncalo Almeida ,

I am able to inject HTML in div, but I want empty spaces to add in DIV. I am creating html string programmatically. When I use   in string it's printed as it is in html.

Best Regards, 

Nitin

mvp_badge
MVP
Solution

Hi Nitin,

As per my understanding for the mentione use-case. I would suggest you to try with the following steps.

Steps to follow:

1) Store the below mentioned expression value in a client action local variable (lets call it - StepTitleVar)

If(Length(FilterTranslation.FilteredList.Current.LocalTranslation.Header) > 15, Substr(FilterTranslation.FilteredList.Current.LocalTranslation.Header,0,15) + "..", FilterTranslation.FilteredList.Current.LocalTranslation.Header)

2) In the JS node pass the local variable (StepTitleVar) value as input parameter

var  StepTitleLabel = $parameters.StepTitleValue + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0'; // append extra space

document.querySelector("#" + $parameters.StepTitleDiv).innerText = StepTitleLabel;


If this is not what you are looking for, then I would request you to share a little bit more details (.oml or JS snippets) about your implemenation.

Hope this helps you!


Kind regards,

Benjith Sam

Hi @Benjith Sam ,

1. Yes we are storing expression value in local variable.

2. We are injecting local variable using javascript.

Extra spaces need to be added in between of HTML string. Based on that I am generating HTML string.

So we can't add spaces in javascript directly.

While generating HTML string I am adding for space but it's printed as it on screen. If I use \xa0 in string then it's printed \ on screen.

Best Regards,

Nitin

mvp_badge
MVP

Hi Nitin,

Thank you for sharing additional information. I have tried to implement the same use-case and it's working as expected for me.

See this sample screen: Add WhiteSpace JS_Task

Use the same Non-breaking Space character without semicolon (;) as shown below


JavaScript Snippet

document.querySelector("#" + $parameters.OutputCntrId).innerHTML = $parameters.InnerTextValue;


Hope this helps you!


Kind regards,

Benjith Sam

Thanks @Benjith Sam!

Got the problem, I am using FormatText method for right padding. Last parameter is padding_char. It's expecting char and I have provided string so- 

Defect is in FormatText method, in case of & nbsp it's taking '&' and in case of \xa0 it's taking '\' as padding char.
Now I am providing '^' as padding char and in JavaScript doing str.replaceAll('^','\xa0').
It's working as expected.

Best Regards,

Nitin

mvp_badge
MVP

It was new learning for me as well.. Hurrah!

Thank you Nitin for sharing this information with us :)


Kind regards,

Benjith Sam

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.