Visual Builder

Get Involved. Join the Conversation.

Topic

    Stephen Bryant
    Using a URL (as opposed to a selected row event) and...Answered
    Topic posted July 19, 2019 by Stephen BryantBronze Trophy: 5,000+ Points, tagged Action Flows, Business Objects, REST, UI, Web 
    94 Views, 14 Comments
    Title:
    Using a URL (as opposed to a selected row event) and Passing parameters to filter the ADP
    Summary:
    click URL, pass parameters and filter an ADP
    Content:

    Hello again,

    I can certainly configure a selected-row event and pass parameters to filter an ADP and show records.

    Is it possible to do this with a link on say, a document number, and passing that document as a parameter to filter and ADP?

    The goal is to show document numbers with an underline indicating that they can be clicked to bring up the details of that document.  This works the traditional when using the select-row event but would like it as a url.

    Thanks,

    Steve

    Version:
    19.1.3

    Best Comment

    Duncan Mills

    I see what you've done - you dragged the wrong thing.  You should have gotten something like this:

     <oj-table summary="Sample Table" scroll-policy="loadMoreOnScroll" id="oj-table-1084591017-1" class="oj-flex-item oj-sm-12 oj-md-12" data="[[$page.variables.someDataListSDP]]" columns='[{"headerText":"Id","field":"id"},{"headerText":"data","field":"data","template":"data"}]'>
            <template slot="data">
                <a target="_blank" :id="[['a-1084591017-1-' + $current.index]]" on-click="[[$listeners.a10845910171Click]]">
                    <oj-bind-text value="[[$current.data]]"></oj-bind-text>
                </a>
            </template>
        </oj-table>
    

    Note how the template has been created that contains the hyperlink (<a> tag) 

    I suspect that you dragged the "URL" component which is a Field  component rather than the Hyperlink component from the Common section of the property inspector

    Comment

     

    • Duncan Mills

      Once you have created the table in the normal way, drag the hyperlink from the component palette and drop it on the column that you want to be the link.  This should create a template to display the data with the label of the link being the data for that attribute. 

      Then select the link and using the Events tab in the property inspector, add an on-click event.  this will pop open the action chain editor and you can then just write an action chain as normal to do whatever navigation that you want.  the $chain.variables.key will hold the key of the record that the hyperlink was clicked on

      • Stephen Bryant

        Duncan,

        I know how to use CSS and style columns, etc.  No matter what I do, the styling will not work on the fields in the column that the drill is based on.  I would like format it to look like a hyperlink. I've classes and styles with no luck.

        Any ideas?

         

        Steve

        • JT Thomas

          Hi Steve,

          Did you try Duncan's suggestion?

          ~/jt

          • Stephen Bryant

            Jt,

            Oh yes I did and works perfectly. The only thing I can’t seem to do is format it with CSS.  I can do the header with a CSS class but for the data fields in the column a class does not work nor does a CSS style.   Do you have any suggestions for that?

            Thanks,

            steve

            • JT Thomas

              How are you applying the CSS tag? In the HTML directly? In the property inspector? Can you share some code?

              ~/jt

    • Stephen Bryant

      Thank you Duncan.  I appreciate your help.

       

      Steve

    • Stephen Bryant

      Jt,

      I’ve only applied a class or style in the property inspector and then checked the HTML and they did show up there too but I have not applied anything directly to the HTML. 

      Here is what I had for the class:

      .urlClass {

      font-weight: bold;

      text-decoration: underline;

      color: blue;

      }

       And then testing out the style I just had one line as follows:

      { font-weight:  bold}

      The strange thing is the classes on the column header work just fine  but when I try the above the data in the column is unaffected.

      Any help is greatly appreciated,

      Steve

       

       

       

       

    • Duncan Mills

      I'm a bit confused - are you saying that the hyperlink is not showing as a hyperlink? Or are you trying to create a text span which looks like a hyperlink whilst using the normal row selection processes to handle the selection and navigation? 

       

      • Stephen Bryant

        Duncan, 

        I used the URL component as you instructed.  It is definitely working when clicking on the doc number.  I am not using the row selection event at all.  The URL (doc number) is tied to a click event but it will not format.  

        There is another component called hyperlink but I did not try that one. Should I use that? I remember trying it a long time ago not knowing about the URL component but did have success. 

        Should URL component automatically format?

        Steve

    • Duncan Mills

      The hyperlink you dropped into the page will just generate a normal HTML <a> tag nothing special and that should be formatted as per any other link *unless* you have overridden that - perhaps in your app.css style sheet.  There should be no reason to have to apply special formatting to make a <a> tag look like a hyperlink, it just will by default. 

      • Stephen Bryant

        Duncan,

        Here is the html code that was generated.  no <a> tag.

        <oj-input-text virtual-keyboard="url" validators='[{"type":"regexp", "options":{"pattern":".*", "hint":"Enter a valid URL", "messageDetail": "Value must be a valid URL"}}]' value="[[$current.data]]" readonly="true" :id="[['oj-input-text--360788421-1-' + $current.index]]" on-click="[[$listeners.ojInputText3607884211Click]]"></oj-input-text>

        What do you think?

        Steve

         

    • Duncan Mills

      I see what you've done - you dragged the wrong thing.  You should have gotten something like this:

       <oj-table summary="Sample Table" scroll-policy="loadMoreOnScroll" id="oj-table-1084591017-1" class="oj-flex-item oj-sm-12 oj-md-12" data="[[$page.variables.someDataListSDP]]" columns='[{"headerText":"Id","field":"id"},{"headerText":"data","field":"data","template":"data"}]'>
              <template slot="data">
                  <a target="_blank" :id="[['a-1084591017-1-' + $current.index]]" on-click="[[$listeners.a10845910171Click]]">
                      <oj-bind-text value="[[$current.data]]"></oj-bind-text>
                  </a>
              </template>
          </oj-table>
      

      Note how the template has been created that contains the hyperlink (<a> tag) 

      I suspect that you dragged the "URL" component which is a Field  component rather than the Hyperlink component from the Common section of the property inspector

    • Stephen Bryant

      Thanks Duncan.  That is what I did. I will convert to a hyperlink and let you know.

       

      Steve