TokenField in table

Support
#1

Hi,

I have a Many-TO-Many relation between Payment and Transaction.
In Payment I have a tokenFiled which select Transactions.
Under tokenField I have a table which shows selected Transactions.

The problem is that I have the same information twice (tokenField and table).
My goal is to add a new column to the table and put the selected (x) tokenField transaction list with this column.

payment-edit.xml

 <dsContext>
 <datasource id="paymentDs"
                    class="com.company.entity.Payment"
                    view="payment-with-transaction">
            <collectionDatasource id="transactionsDs"
                                  property="transactions"/>
        </datasource>
    </dsContext>

 <tokenList id="tokenList"
                   datasource="transactionsDs">
            <lookup lookup="true"
                    lookupScreen="crmrai$Transaction.browse"/>
        </tokenList>
  <table id="transactionsTable"
               height="100px"
               width="100%">
            <columns>
                <column id="a"/>
                <column id="b"/>
                <column id="c"/>
                
            </columns>
            <rows datasource="transactionsDs"/>
        </table>

I added in Payment Controller a new column but I don’t know how to connect tokenField to this column.

transactionsTable.addGeneratedColumn("token", r -> {

            FlowBoxLayout glist = componentsFactory.createComponent(FlowBoxLayout.class);
            glist.setHeightAuto();

            return glist;
        } );

Please advise.

I’ve tried this but I have an error:
image

@Inject
private TokenList tokenList;
transactionsTable.addGeneratedColumn(“token”, r -> {

             return tokenList.getValue();
    } );

Basically I should return instance name…

#3

Hi!

Please, could you clarify the main goal? As I understand, you want to have a dropdown list with transactions and when a transaction is selected add it to the table.

#4

Exactly. Which controller is better for many-to-many relation? Maybe tokenField is not the right option (because the infos is displayed twice).

#5

You can use the default edit template generated by Studio for your payment-with-transaction view. It is a simple table with “Add” and “Remove” actions:

<table id="transactionsTable" width="100%" height="200px">
    <actions>
        <action id="add"/>
        <action id="remove"/>
    </actions>
    <columns>
        <column id="column1"/>
        <column id="column2"/>
    </columns>
    <rows datasource="transactionsDs"/>
    <buttonsPanel>
        <button action="transactionsTable.add"/>
        <button action="transactionsTable.remove"/>
    </buttonsPanel>
</table>

If you want to do with dropdown list you can do the following:

  1. Add CollectionDatasource with your Transaction class. It will be used as options for LookupField 
<dsContext>
       ...
       <collectionDatasource id="allTransactionsDs"
                          class="com.company.demo.entity.Transaction"
                          view="_local">
        <query>
            <![CDATA[select e from demo$Transaction e]]>
        </query>
    </collectionDatasource>
       ...
</dsContext>
  1. Add LookupField:
<lookupField id="transactionOptionsField"
             optionsDatasource="allTransactionsDs"/>
  1. In the Payment Edit controller add:
@Inject
private LookupField transactionOptionsField;

@Inject
private CollectionDatasource<Transaction, UUID> transactionsDs;

@Inject
private ComponentsFactory factory;

@Override
public void init(Map<String, Object> params) {
    transactionOptionsField.addValueChangeListener(event -> {
        if (event.getValue() != null) {
            Transaction transaction = (Transaction) event.getValue();
            if (!transactionsDs.containsItem(transaction.getId())) {
                transactionsDs.addItem(transaction);
            }
        }
    });
}

See the attached demo project:
demo.zip (84.1 KB)

#6

Thank you very much, Roman.
I wonder why PickerField controller doesn’t have optionsDatasource feature?

#7

How can I start with an empty table?

#8

Please, could you clarify with more details what problem do you have?

#9

If I remove the query ![CDATA[select e from demo$Transaction e]], the table is still populated.
It’s normal?

#10

“Add” action should automatically add items to the datasource. You can see an example in the above-attached project, just try to create some Transaction instance.
If you still get an issue, attach screen layout and controller or simple demo project where it is reproduced.

Yes, it is the right behavior when query is not defined in a datasource. But it is not recommended to remove such queries, because some functionality will not work properly (e.g. filter).

1 Like
#11

Basically the information goes the first time in datasources and then in database?