80
Views
16
Comments
Solved
How do i truncate text by byte length
Application Type
Reactive

Hello, so as the title, i want to truncate text and have the ... at the end of a string by byte length, not by char. I'm currently using TextEllipsis and tooltip to do it, but it truncate text by char. Because i have some Japanese character in my app, and a Japanese letter have 2 byte, while alphebet letter have 1 byte, i have some tip is to use javascript, but i don't know how to do it and where to apply the script, can someone help me? Thanks in advance 


2025-12-04 09-01-03
Kiet Phan
Champion
Solution

@john cop
Hi, Your code is in attachment.

HelpingTruncate.oml
2025-12-04 09-01-03
Kiet Phan
Champion
Solution

Hi @john cop 

First, make your action be a Function

Then, in the expression of column, you can easily call the function.

Result

The OML file is in attachment, you can refer the code.

Hope this help :)

HelpingTruncate.oml
2020-07-21 19-28-50
Rajat Agrawal
Champion

Hi @john cop,

Please provide me one test case or sample exactly what you want, for better understanding.



Regards,

Rajat

UserImage.jpg
Long Truong Hoang

I can't really share my oml since it's my company policy, but i'll try to give you some example at my best
So let's say i want a text that is too long to ended at about 5 character, i will use TextEllipsis and set the limit char to 5, so the output is aaaaa... In the same time, a japanese character width is sometime bigger than alphabet character, like this ととととと ...
So now i want it to be truncate by byte length(Alphabet letter byte is 1, japanese is 2). So if i set max length of 5 byte, i will have this aaaaa..., とと...
Once again, sorry since i can't share my oml

UserImage.jpg
Ojasvi Sharma

Hi @john cop

I hope you are doing good. 

I have two solutions regards you problem. One if the string includes both English and Japanese character and second case is when it include only one language's character.

  • If the string includes both English and Japanese character :-  Then you can add an loop and check each character with it's ASCII value and according give the Max length by calculation.
  • If the string contains only one type of language :- Then you can check the first character and multiply the max-length accordingly. 

Note :- It is only possible if you can set the max-length as variable and if the data is fetched from the server side.


Regards, 

Ojasvi Sharma



2020-07-21 19-28-50
Rajat Agrawal
Champion

Hi @john cop ,

Below I attached one OML for your reference please check inside that I have added one javascript to truncate text.

Hope this will helps you!

Regards,

Rajat


ConvertText.oml
2025-12-04 09-01-03
Kiet Phan
Champion

@john cop 

Got your point, wait a little bit. I will share the code.

UserImage.jpg
Long Truong Hoang

Thank you

2025-12-04 09-01-03
Kiet Phan
Champion
Solution

@john cop
Hi, Your code is in attachment.

HelpingTruncate.oml
UserImage.jpg
Long Truong Hoang

Thank you alot, i will try it when i get home
Love from FPT HCM :))
In your picture you perform an input and output it out, it can also be use when getting the data from the aggregate right?

2025-12-04 09-01-03
Kiet Phan
Champion

you're welcome.

Yes, the Action written in common, you can call it every you want.

2021-11-19 11-12-44
Rui Mendes


After analyzing the available proposal, I believe that validating only against the three mentioned categories may lead to incorrect functionality when dealing with the remaining characters.

Therefore, I am providing code to support the additional categories below. 

function isJapaneseCharacter(char) {

    const code = char.charCodeAt(0);

    return (

        (code >= 0x3040 && code <= 0x309F) || // Hiragana

        (code >= 0x30A0 && code <= 0x30FF) || // Katakana

        (code >= 0x4E00 && code <= 0x9FBF) || // Kanji

        (code >= 0x31F0 && code <= 0x31FF) || // Katakana Phonetic Extensions

        (code >= 0x3400 && code <= 0x4DBF) || // CJK Unified Ideographs Extension A

        (code >= 0x20000 && code <= 0x2A6DF) || // CJK Unified Ideographs Extension B

        (code >= 0x2A700 && code <= 0x2B73F) || // CJK Unified Ideographs Extension C

        (code >= 0x2B740 && code <= 0x2B81F) || // CJK Unified Ideographs Extension D

        (code >= 0x2B820 && code <= 0x2CEAF)   // CJK Unified Ideographs Extension E

    );

}

UserImage.jpg
Long Truong Hoang

Sorry to have bother you once more. But i'm having difficulty
Basically i needed to change every field there is inside a table(Let's say a DB have ProdName, ProdDesc, ProdSN,...) when i click the button, all of those will change also. I don't know how to input all of them into the text input parameters of your, now i can only paste  in one at a time
And one more question if you don't mind, after output the result from the JS, i append all of the result into a Product list, but when i use an expression to display it(The expression goes like this: TrunCateList.Current.Description), it only display the current description(I have 2 record, one is ここここここ  and one is MouseMouse, the display only show ここ in all of the record)

2025-12-04 09-01-03
Kiet Phan
Champion
Solution

Hi @john cop 

First, make your action be a Function

Then, in the expression of column, you can easily call the function.

Result

The OML file is in attachment, you can refer the code.

Hope this help :)

HelpingTruncate.oml
UserImage.jpg
Long Truong Hoang

OMG you are a saint, thank you very much, i was struggling with it the whole afternoon(What i did is make a loop, get every data there is inside the aggerate and then put them into the js, get the output and append them into a list), but this is way easier. You are the best

2025-12-04 09-01-03
Kiet Phan
Champion

You're welcome :)

freely raise your question if there is any problems while coding, I'm here to help :D

UserImage.jpg
Long Truong Hoang

Oh i have one final question, if i set it to be a function then call it inside the expression(I have about 3 screen, each screen have about 15 column), will it affect performance in anyway? I'm afraid calling it to much will somehow affect performance(Affect in like a bad way that make the screen take too long to load, else if it load in a few second then it's ok)
Thank you in advance

2025-12-04 09-01-03
Kiet Phan
Champion

Since the client-action run on front-end, It will defenitely let browser do some works, but the function is not that complicated enough to slow down screen performance :)

CPU are strong today, dont' worry :D

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