XPages: Add a button to a data view custom control

0
votes

I'm using the Extension Library for creating XPages and I want to use a view, where i can use some inline buttons (buttons in every row of the view) and I also want to use the functionality of the data view where I can expand the content of the current row.

I want to use one of those inline buttons, to expand the content of this row, because before the functionality of this button can be executed, the user has to enter some data in an inputText-field.

So the questions are? - How can I add inline buttons (using SSJS) to a data view? - Do you know any other way to solve my problem?

Thanks!

2
xpagesdataview
What do you mean by "expand the content of this row"? Do you mean want to display more data or do you that you need the user to be able to enter more data associated with that row? – David Navarre
In this case I want to expand the row and show an inputText-Field and an additional Button you can press. Both working with the document the row is displaying – M. Schaetzl

2 Answers

1
votes

In the Extlib database the expansion with a custom form was done using a link. I would stick to the links -> gives you the most options (client side, server side). Stick to those. If you really need that "buttony" look (which does IMHO not look very much like a web application), use CSS to style the link to look like a button. The OneUI has instructions for that (or steal them from Twitter bootstrap).

The OneUI is worth another look suggesting a different visual clue for expand/collapse.

0
votes

You should be able to do this within the confines of a dataView by adding a facet for "detail" and using collapsible detail.

For the dataView, set collapsibleDetail="true", add in a panel to the detail facet, then put the elements you want to display when they click to expand in that panel.

<xe:dataView id="dataView1" collapsibleDetail="true" detailsOnClient="true">
    <xp:this.facets>
        <xp:panel xp:key="detail">
            <xp:button id="Mybutton" value="My button"></xp:button>
            <xp:label value="This is the label" id="label1" for="Mybutton"></xp:label>
        </xp:panel>
    </xp:this.facets>
    <xe:this.summaryColumn>
        <xe:viewSummaryColumn columnName="lastname"></xe:viewSummaryColumn>
    </xe:this.summaryColumn>
    <xe:this.extraColumns>
        <xe:viewExtraColumn columnName="city"></xe:viewExtraColumn>
        <xe:viewExtraColumn columnName="state"></xe:viewExtraColumn>
        <xe:viewExtraColumn columnName="zip"></xe:viewExtraColumn>
    </xe:this.extraColumns>
    <xe:this.data>
        <xp:dominoView var="view2" viewName="ByName-First"></xp:dominoView>
    </xe:this.data>
</xe:dataView>

Now, I'm not positive on how to bind it to the contents of the documents displayed, but I'm sure there's a way. I know how to access the document in a repeat, but not in a dataView, so I would probably do it in a repeat (unless you figure it out and post it to us here!)

Hopefully, that moves you in the right direction.