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

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? 

  Discussion posts and replies are publicly visible

  • 0
    Certified Lead Developer

    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",{})
          )
        )
      )
    )

  • 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.

  • 0
    Certified Senior Developer

    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

  • 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:

     

  • 0
    Certified Lead Developer
    in reply to mollyn126

    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 ?

  • 0
    Certified Lead Developer
    in reply to mollyn126

    okay great, Check the above code.

  • It isn't possible to have a grid cell where there are multiple different tooltips within the same cell. I'd suggest thinking about other designs, such as splitting the grid into multiple rows or showing the information about the tooltip elsewhere on the page.

  • 0
    Certified Lead Developer
    in reply to Peter Lewis

    Yes peter I understand multiple tooltips can not be added for the same I spitted all the ids in different rows and used individual tooltips for the same. 

  • 0
    Certified Lead Developer

    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!