Segment and HTML

HCL Volt MX Volt MX Forum
,
1

Hello group! How do I enter different html code for each line in a segment?

2

Hi @Rubens Marcelo . Can you explain what do you mean by inserting HTML code in a segment? Data to segments can either be provided using the static master data property (if the data is not changing and not being updated or revised regularly. for eg: pricing list for the application) or can provide the segment data through IRIS API (js).

If you are using the API variant, you have to make sure that the data is provided as a array of JSON objects

For example:

// segment example

segmentData = [

// each JSON object represnts a row/record for data to be presented & the keys are named similar to the labelsName of the segment section

{“lbl01Name” : “Value”,  “lbl01Price” : “$50”},

{“lbl02Name” : “Value”,  “lbl02Price” : “$13”},

];


// segSection is the id of the segment section in the UI & setData is the method that is mapping the provided JSON obejct to each row of segment.

this.view.segSection.setData(segmentData);


// You can also provide sections in the segments by using a slight differently-structured JSON

You can watch the online course (SW Academy) that HCL is providing on the same or can also use this link to know more about it.

I hope this helps me in any manner :)

3

I, I'm trying to put a link in the segment, it would be a different link for each line of the segment:

Below is a code snippet that is in the form's Controller, the column in question is marked(lblLinkBoleto1):

define({ 

//Type your controller code here

listaBoletos : function(self) {


function INVOKE_SERVICE_e210a84eed65416c9e5b1ed0acc51eb2_Callback(ViewBoleto) {
  var tempCollection224 = [];
  var tempData5787 = ViewBoleto.records;
  for (var each4713 in tempData5787) {
tempCollection224.push({
      "lblVENCIM1": {
        "text": dataBDFormatar(voltmx.visualizer.toString(tempData5787[each4713]["VENCIM"]))
      },
      "lblVALOR1": {
        "text": voltmx.visualizer.toString(formatoMoeda(tempData5787[each4713]["VALOR"]))
      },
      //"lblLinkBoleto1": {
        //"text": tempData5787[each4713]["LinkBoleto"]
        //"link" : voltmx.ui.Link(linkBasic, linkLayout, linkPSP)
        
      //},
     "lblLinkBoleto1" : ("[<a href='" + tempData5787[each4713]["LinkBoleto"] + "' target=''>clique aqui</a>]"),
    });
  }
  self.view.segViewBoleto.setData(tempCollection224);</code></pre>
4

Is lblLinkBoleto1 a browser widget, because we can use HTML through that widget only.

5

Hi @Rubens Marcelo ,

It seems you want to have a link inside a segment widget. To achieve this requirement, you can add richtext widget inside segment, and to that richtext widget you can add a link. Richtext widget supports href tag.

How to assign the data in a segment is nicely explained by @Vishal Vats in the above comment.

Below doc links might help you,

SegmentedUI Widget Basics - HCL Volt MX Documentation V9.2 (hcltechsw.com)

RichText Widget Basics - HCL Volt MX Documentation V9.2 (hcltechsw.com)

Revert in case of any queries.

Thank you,

Anurag

6

Hi Rubens,

You can use, in Volt Iris, the call voltmx.application.openURLAsync so that each row of a segment widget can open a URL. Use the onClick event of a button or a flex container to execute "openURLAsync". Here is its documentation: https://opensource.hcltechsw.com/volt-mx-docs/95/docs/documentation/Iris/iris_api_dev_guide/content/voltmx.application_functions.html#platform-availability_36

7

Thanks!, exactly the solution I needed.