CODEWITHSUNDEEP
javascriptjetvisual-build-professional
HKmar
HKmar

Reputation: 45

How to add hyperlink to the row values in vbcs table

I have created a table in vbcs and assigning the values to the respetive columns.

  <oj-table scroll-policy="loadMoreOnScroll" class="oj-flex-item
 oj-sm-12 oj-md-12"    
 columns='[{"headerText":"S.No","field":"SNo","resizable":"enabled"},{"headerText":"Order
 Number","field":"OrderNumber"}]' data="[[ $variables.sodataPDP ]]">
 <oj-paging-control data='[[$variables.sodataPDP]]' id="paging"  page-size="5" slot="bottom">
 </oj-paging-control>

The code snippet has 2 columns those are S.No and Order Number . Now I want to add the hyperlink to the Order number value.

Ex: The table display 5 rows like below and i want to add hyper link www.google.com to that Order number value.

S.No   Order Number
1         456
2         123
3         785
4         639
5         114

can you please help me with this

Upvotes: 0

Views: 135

Answers (1)

Jan Stanicek
Jan Stanicek

Reputation: 1281

If I understand it well, you need to define special template slot which replace plain text value with custom content.

For that purpose you have to define, that the column needs template property and then you have to define such template as nested element in the <oj-table> element.

Something like this:

<oj-table scroll-policy="loadMoreOnScroll" 
          class="oj-flex-item oj-sm-12 oj-md-12"    
          columns='[{"headerText":"S.No","field":"SNo","resizable":"enabled"},
                    {"headerText":"Order Number","field":"OrderNumber","template":"orderNumberLink"}]'
          data="[[ $variables.sodataPDP ]]">
    <template slot="orderNumberLink" data-oj-as="orderNumber">
        <a href="https://www.google.com">
            <oj-bind-text value="[[orderNumber.data]]"></oj-bind-text>
        </a>
    </template>
    <oj-paging-control data='[[$variables.sodataPDP]]' 
                       id="paging"  
                       page-size="5" 
                       slot="bottom"></oj-paging-control>
</oj-table>

See cookbook https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=table&demo=templateSlotTable and API https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojTable.html#cellTemplate

Upvotes: 0

Related Questions