Does anyone how to easily create a numbered list? So just like the Bullets widget but then with numbers instead. The "List Records" widget also can't display numbers. I checked the forge but was unable to find anything in there.

can you give us an example in image about what do you pretend?

Best Regards

Hi Nuno. 

I'm looking for a component that mimics or uses the html element <ol> (I better could have used that term instead). For an example take a look at the following picture and URL: https://www.w3schools.com/HTML/html_lists.asp

Reason why I want to use this instead of a bullet list is to emphasize on the steps taken in a process and that there is an order in this process. 

Vincent Koning wrote:

Hi Nuno. 

I'm looking for a component that mimics or uses the html element <ol> (I better could have used that term instead). For an example take a look at the following picture and URL: https://www.w3schools.com/HTML/html_lists.asp

Reason why I want to use this instead of a bullet list is to emphasize on the steps taken in a process and that there is an order in this process. 



Layout:


How to:


ListRecords1.List.CurrentRowNumber+1 + ". "


Best Regards

PVN

Hi Pedro,

I also thought of that solution but this is causing some markup issues that you also show in your screenshots. The indentation that happens when you add more numbers to the list is causing the text to be misaligned and that is what I want to prevent. I have added an screenshot that shows how regular html is displaying the content. Note that the alignment of the text is preserved. And yes, I can use an expression to create the html text and render that but that is also exactly what I'm trying to prevent. It's a low-code platform so I'm trying to find low-code and reusable solution. But it could be that that is the only solution at this time. 

ps. I'm working with static data so while I could add it to a list I rather wouldn't due to performance reasons. There is enough happening currently during page load. The bullet list is also very useful to this reason. Just drop in a few text widgets and I'm done. 

try use it in advanced query , if you have an sql database:

WITH Nums AS

(

  SELECT n = ROW_NUMBER() OVER (ORDER BY [object_id])

  FROM sys.all_objects


)

SELECT n FROM Nums

WHERE n BETWEEN @start AND @end

ORDER BY n;

or try it in oracle:

Select Rownum r
From dual
Connect By Rownum <= 100

Put in the 2nd query line the attribute of your table that you want and use the ORDER BY clause to order your table... 


Best Regards,

Nuno Pereira

Hi Nuno,

I don't really see what is this will accomplish. How does retrieving data in a different way solve my layout issue? I don't have an issue with getting the data (it's static to begin with) but with displaying it how I want it to.

Vincent Koning wrote:

Hi Pedro,

I also thought of that solution but this is causing some markup issues that you also show in your screenshots. The indentation that happens when you add more numbers to the list is causing the text to be misaligned and that is what I want to prevent. I have added an screenshot that shows how regular html is displaying the content. Note that the alignment of the text is preserved. And yes, I can use an expression to create the html text and render that but that is also exactly what I'm trying to prevent. It's a low-code platform so I'm trying to find low-code and reusable solution. But it could be that that is the only solution at this time. 

ps. I'm working with static data so while I could add it to a list I rather wouldn't due to performance reasons. There is enough happening currently during page load. The bullet list is also very useful to this reason. Just drop in a few text widgets and I'm done. 


Vincent i dont know any widget to do that.

Probably if you don't want waste much time, i try do some logic to put "spaces" between the number and the text to align, like : if (currentRownumber) <10  and TotalRowNumber < 100 ) then ( number + ". (space+space) ), else (number + ". (space+space+space))


i know its not what you as thinking but works =)

Hi!

Have you tried to put the expression containing the number inside a container with fixed length and align "right"?

Regards

Graça


"Does anyone how to easily create a numbered list?" i think i reply your question, but sorry. 

I couldn't see your last reply.. 

Solution

I think ListRecords widget should have additional "numbers" selection in Line Separator options.

To achieve this,

  1. Set ListRecords widget "Line Separator" type as "Bullet"
  2. add CSS to change ListRecords style:

.ListRecords ul li {
    list-style-type: decimal;
}

You'll still get HTML <ul> tag, but it's styled as <ol> list.

br,

-Mikko(N)



Solution

Maria da Graça Peixoto wrote:

Hi!

Have you tried to put the expression containing the number inside a container with fixed length and align "right"?

Regards

Graça



i tried what you said and i think don't work, or can you sent a print? 


Best regards,

PVN

Try to iterate your list and get the max. characters of your entry names of the total lines using lenght() built-in function, then calculate, by line, the number of spaces that you have to do so you have text aligned such as:

spacesnumber = max characters of the major line - quantity of current characters line 

and then add these quantity of spaces by each table line so that it is formatted.


Best Regards,

Nuno Pereira

Mikko Nieminen wrote:

I think ListRecords widget should have additional "numbers" selection in Line Separator options.

To achieve this,

  1. Set ListRecords widget "Line Separator" type as "Bullet"
  2. add CSS to change ListRecords style:

.ListRecords ul li {
    list-style-type: decimal;
}

You'll still get HTML <ul> tag, but it's styled as <ol> list.

br,

-Mikko(N)



This works fine ;) 


Mikko Nieminen wrote:

I think ListRecords widget should have additional "numbers" selection in Line Separator options.

To achieve this,

  1. Set ListRecords widget "Line Separator" type as "Bullet"
  2. add CSS to change ListRecords style:

.ListRecords ul li {
    list-style-type: decimal;
}

You'll still get HTML <ul> tag, but it's styled as <ol> list.

br,

-Mikko(N)



Nice solution! I will use this one (and make an idea to add numbering to the List Records widget. 


Pedro Vila Nova wrote:

Maria da Graça Peixoto wrote:

Hi!

Have you tried to put the expression containing the number inside a container with fixed length and align "right"?

Regards

Graça



i tried what you said and i think don't work, or can you sent a print? 


Best regards,

PVN

A little late but ... 

The container have 1 column fix lenght. 

this code gives the below list

Regards

Graça