Question

Question with adding tooltip to each of the ID in a text string of ID

Forum|Forum|3 years ago
August 24, 2022
10 replies
0 views

Hi everyone,

My read-only grid has a column storing a text string of IDs, which looks like this 001/002/003/004/005/006, and it was queried from record type 01

I want to add the tooltip, which will show the Client category of each of the ID in the list, the information is stored in record type 02, and I use the ID from record type 01 as reference data to query. So within richTextDisplayField, I set the tooltip parameter like below:

tooltip: a!forEach(
                    items: split(
                                fv!row[recordType!record01.Id,
                                 "/"
                             ),
                    expression: "Category:" & 
                                a!queryRecordType(
                                        recordType: recordType!record02,
                                        fields: recordType!record02.clientCategory,
                                        filters: a!queryFilter(
                                                        field: 'recordType!record02.Id,
                                                        operator: "=",
                                                         value: tointeger(fv!item)
                                                         ),
                                        pagingInfo: a!pagingInfo(1,1)
                                 ).data[recordType!record02.clientCategory] 
                  )

I expect that when I click each ID, the tooltip will show: Category: Abcdef, instead I got something like this photo:

I think it's the forEach () issue, but no idea why it's the issue... Anyone know what the reason is?

U

ujjwalr0002

Participating Frequently

Hi molly,

As it is not a good practice to use the query entity in looping functions.

we can query the data at once and then try fetch the details by using wherecontains() and index() functions.

a!localVariables(
  local!data1:"001/002/003/004",
  local!category:{
    a!map(
      id:"001",
      category:"Category1"
    ),
    a!map(
      id:"002",
      category:"Category2"
    ),
    a!map(
      id:"003",
      category:"Category3"
    ),
    a!map(
      id:"004",
      category:"Category4"
    )
  },
  a!forEach(
    items: split(local!data1,"/"),
    expression: a!richTextDisplayField(
      label: concat(
        "id - ",
        fv!item,
        " | catgeory - ",
        index(local!category,wherecontains(
          fv!item,
          index(local!category,"id",{})
        ),"category",{})
      )
    )
  )
)

mollyn6512Author

Hi Ujjwa!

I queried the record fields of recordType02 and stored them in a local variable, then refer to your code for the tooltip part. Below is my code. Using forEach() twice looks extra to me too but it won't work if I put forEach() infront of a!richTextDisplayfield so...

a!localVariables
(local!category: a!queryRecordType(
                        recordType: recordtype!record02,
                        fields: {recordtype!record02.Id, recordtype!record02.clientCategory}
                        pagingInfo: a!pagingInfo(1,50)
                 ),
 a!gridColumn(
            label: "ID",
            value: if(
                    a!isNullOrEmpty(fv!row[recordtype!record01.Id]),
                    "-",
                    a!richTextDisplayField(
                                    value: a!forEach(
                                                items: split(
                                                        fv!row[recordtype!record01.Id],
                                                        "|"
                                                        ),
                                                expression: 
                                                    a!richTextItem(
                                                        text: insert(fv!item, "; ", if(fv!isFirst, null,count(fv!item))),
                                                        link: a!recordLink(
                                                                    label: fv!item,
                                                                    recordType: recordtype!record01,
                                                                    identifier: tointeger(fv!item),
                                                                    openLinkIn: "NEW_TAB"
                                                                )
                                                    )
                                            ),
                                    tooltip: a!forEach(
                                                items: split(
                                                        fv!row[recordtype!record01.id],
                                                        "|"
                                                        ),
                                                expression: concat("Category:",
                                                                    index(local!category, wherecontains(fv!item,index(local!category,"Id",null)),
                                                                   "categoryName",{})
                                                            )
                                            )
                )   
               ),
    sortField: recordtype!record01.Id,
    align: "CENTER"
  ),  
)

Below is what shows up when I hover my mouse on the ID and it does not look right to me...

Just some more info about the background: I am creating a grid column that shows the ID in recordType01, and I want each ID within the list of ID (text string: "001/002/003/004") has seperate tooltip showing it's client category, which data is available in recordType02. the 2 record Types have ID as common column.

L

lewisj

Hi Molly,

Not used this before - but my assumption here is that there can only be one tooltip for each richtextdisplay field. If you want to display the different categories, you would have to split out each into their own richtextdisplay field - why doesn't the a!foreach work before this?

Cheers,

Lewis

mollyn6512Author

a!localVariables
(local!category: a!queryRecordType(
                        recordType: recordtype!record02,
                        fields: {recordtype!record02.Id, recordtype!record02.clientCategory}
                        pagingInfo: a!pagingInfo(1,50)
                 ),
 a!gridColumn(
            label: "ID",
            value: if(
                    a!isNullOrEmpty(fv!row[recordtype!record01.Id]),
                    "-", 
                    a!forEach(
                            items:  split(
                                        fv!row[recordtype!record01.Id],
                                        "|"
                                    ),
                            expression: 
                                    a!richTextDisplayField(
                                                    value: a!richTextItem(
                                                    text: insert(fv!item, "; ", if(fv!isFirst, null,count(fv!item))),
                                                    link: a!recordLink(
                                                                    label: fv!item,
                                                                    recordType: recordtype!record01,
                                                                    identifier: tointeger(fv!item),
                                                                    openLinkIn: "NEW_TAB"
                                                            )
                                    )
                            ),
                                    tooltip: concat("Category:",
                                                                    index(local!category, wherecontains(fv!item,index(local!category,"Id",null)),
                                                                   "categoryName",{})
                                                            )
                                            )
                )   
               ),
    sortField: recordtype!record01.Id,
    align: "CENTER"
  ),

I tried using forEach() infront of a!richTextDisplayField but all the IDs was replaced by stranged strings like this:

U

ujjwalr0002

Participating Frequently

a!localVariables(
  local!category: {
    a!map(id: "001", category: "Category 1"),
    a!map(id: "002", category: "Categiry 2"),
    a!map(id: "003", category: "Category 3"),
    a!map(id: "004", category: "Categiry 4")
  },
  local!data: { "001/002/003/004", "001/002/003/007" },
  {
    a!gridLayout(
      label: "GRID",
      headerCells: { a!gridLayoutHeaderCell(label: "data") },
      columnConfigs: a!gridLayoutColumnConfig(width: "ICON"),
      rows: a!forEach(
        items: local!data,
        expression: a!forEach(
          items: split(fv!item, "/"),
          expression: a!gridRowLayout(
            contents: a!richTextDisplayField(
              value: a!richTextItem(text: fv!item, ),
              tooltip: concat(
                "Category: ",
                index(
                  local!category,
                  wherecontains(
                    fv!item,
                    index(local!category, "Id", null)
                  ),
                  "category",
                  {}
                )
              )
            ),
            
          )
        )
      ),
      
    )
  }
)

Can you help me with the data you are getting when you query the record?

Do you want an individual tooltip for each item or a combined tooltip ?

aparajitas0002

Assumption: Based on your replies to previous answers my assumption is that the whole Text string needs to be displayed as it is and each part divided up by slash should have its own tooltip. It is currently impossible to achieve this with the way the data needs to be displayed since we do not have tooltip in rich text item component.

Since the text is being displayed in one rich text component all the tooltips are showing up together.

Suggestion 1: Since the data needs to be displayed in a grid for multiple IDs, I would suggest to split the data into multiple columns. Use editable grid for the same, since it would be easier to configure that grid field.

I would suggest that each part divided by the slash should be used in separate columns which would give you multiple rich text fields and hence each can have its own tooltip.

Somewhat like this:

I believe there would be more columns so the spacing would reduce between these columns.

Suggestion 2: If only 1 ID needs to be displayed, not particularly on this interface, or if by any chance, you can shift to another way of displaying data, other than a grid, then the side by side layout could be used to display each part of the id in separate rich text field.

Hope this helps!

Sign up

Login with SSO

Login to the community

Login with SSO