Teamstudio Unplugged: добавление дополнительных строк таблицы без частичного обновления

Question

Я использую Teamstudio Unplugged, чтобы попытаться расширить строку таблицы с привязкой inputTexts к документу.

Функция этой таблицы состоит в том, чтобы пользователь записал наблюдение и затем описание наблюдения.

После этого пользователь должен иметь возможность нажать кнопку и получить еще один ряд, чтобы он мог добавить еще одно наблюдение.

Я не могу частично обновить всю таблицу, потому что это приведет к тому, что inputTexts перезагрузит привязанное к ним значение.

Я не могу частично обновить новую строку и изменить ее класс стилей с помощью серверных сценариев, потому что идентификаторы не переносятся из конструктора. Это означает, что это в дизайнере:<xp:tr id="row1"> становится это в компьютерном симуляторе: <tr>Поэтому я не могу решить эту проблему с помощью вычисленного стиля и частичного обновления. Так что теперь я создал кнопку, включенную ниже, но она только дважды работает. после этого строка onclick никогда не меняется.

<xp:button value="Flere observationer" id="button4" styleClass="button">
    <xp:this.attrs>
        <xp:attr name="onclick">
            <xp:this.value><![CDATA[#{javascript:
                return "$('.row"+sessionScope.rows+"').removeClass('hidden');"
            }]]></xp:this.value>
        </xp:attr>
    </xp:this.attrs>
    <xp:eventHandler event="onclick" submit="true" refreshMode="partial"
         refreshId="button4">
        <xp:this.action>
            <xp:executeScript script="#{javascript:sessionScope.rows++;}">
            </xp:executeScript>
        </xp:this.action>
    </xp:eventHandler>
</xp:button>

Answer 1

Это можно сделать в Unplugged с использованием стандартных (-ish) техник XPages, что может быть проще для тех, кто плохо разбирается в JQuery. Я бы никогда не рекомендовал использовать таблицу для разметки, используйте <div> и или <ul/li> теги и использовать CSS. Однако, чтобы ответить на этот конкретный вопрос, я использовал таблицу (забираясь с мыльницы)...

Поэтому я предполагаю, что данные в каждой строке находятся в одном документе. Если это так, и пользователь пишет по одному наблюдению за раз, почему бы не использовать полное обновление? Все делается на стороне клиента на Unplugged (даже серверные части - если это имеет смысл), поэтому это быстро. Этот метод показывает существующие наблюдения (если применимо) и позволяет пользователям вводить еще одну строку за раз:

Добавьте в форму скрытое поле - NoOfObservations - это может быть текстовое поле, которое будет использоваться в качестве индекса в XPage.

Добавьте свой источник данных на XPage в форму

Создайте событие beforePageLoad, чтобы установить индекс из существующего или нового документа:

<xp:this.beforePageLoad><![CDATA[#{javascript:
var ObservationCount = 0;
if(!document1.isNewNote()){
ObservationCount = document1.getItemValue("NoOfObservations")[0];
}
sessionScope.put("observations", ObservationCount);
}]]>
</xp:this.beforePageLoad>

Создайте свою таблицу с существующими строками - используя элемент управления xp:repeat с индексом в sessionScope для создания ваших строк - добавив 2 новые строки для новых записей:

<table>
    <xp:repeat id="repeat1" rows="30" var="rowData"
        indexVar="dataRows">
        <xp:this.value><![CDATA[#{javascript:sessionScope.get("observations");}]]></xp:this.value>
        <tr>
            <td>
                <xp:label value="Observation" id="label1"
                    style="color:rgb(255,255,255)">
                </xp:label>
            </td>
            <td>
                <xp:text escape="true" id="computedField1">
                    <xp:this.value><![CDATA[#{javascript:return document1.getItemValueString("ObservationTitle" + dataRows);}]]></xp:this.value>
                </xp:text>
            </td>
        </tr>
        <tr>
            <td>
                <xp:label value="Details" id="label2"
                    style="color:rgb(255,255,255)">
                </xp:label>
            </td>
            <td>
                <xp:text escape="true" id="computedField2">
                    <xp:this.value><![CDATA[#{javascript:return document1.getItemValueString("ObservationDesc" + dataRows);}]]></xp:this.value>
                </xp:text>
            </td>
        </tr>
    </xp:repeat>
    <tr>
        <td>
            <xp:label value="New Observation"
                id="newObservationTitle" style="color:rgb(255,255,255)">
            </xp:label>
        </td>
        <td>
            <xp:inputText id="inputText1"></xp:inputText>
        </td>
    </tr>
    <tr>
        <td>
            <xp:label value="New Description"
                id="newObservationDesc" style="color:rgb(255,255,255)">
            </xp:label>
        </td>
        <td>
            <xp:inputTextarea id="inputTextarea1"></xp:inputTextarea>
        </td>
    </tr>
</table>

Используйте кнопку xp: со следующим SSJS в событии onClick:

<xp:button value="Save" id="button1">
    <xp:eventHandler event="onclick" submit="true"
        refreshMode="complete">
        <xp:this.action>
            <xp:actionGroup>
                <xp:executeScript>
                    <xp:this.script><![CDATA[#{javascript:
var newObservation = parseInt(sessionScope.get("observations")) +1;
document1.replaceItemValue("ObservationTitle" + newObservation,  getComponent("inputText1").getValue());
document1.replaceItemValue("ObservationDesc" + newObservation, getComponent("inputTextarea1").getValue());
document1.replaceItemValue("NoOfObservations", newObservation);
document1.save();}]]></xp:this.script>
                </xp:executeScript>
                <xp:openPage name="/UnpMain.xsp"></xp:openPage>
            </xp:actionGroup>
        </xp:this.action>
    </xp:eventHandler>
</xp:button>

Answer 2

Как и в случае с другим вашим вопросом, я снова склоняюсь делать это на стороне клиента, а не пытаться делать частичные обновления. Просто добавьте строки в таблицу с помощью jQuery, а затем сохраните значения из каждой строки в скрытых полях списка при сохранении документа.

Кроме того, для идентификаторов, с которыми вы хотите работать, вместо того, чтобы полагаться на идентификаторы, генерируемые сервером, добавьте свои собственные атрибуты и выберите элементы, используя их вместо этого.