Changes to DOM objects are lost after partial update - xpages

On a page I have some fields that I want to be "readonly" (in my meaning they can't be accessed but they will store values, read earlier question in this matter if issues...).
I use a client JS setting these attributes on page load:
$(".readonly").attr('readonly', true);
If I have a partial update on any of these fields the attribute is lost and the field is accessible.
What is the best practice to overcome this and make it work?

Every partial refresh has a oncomplete method bound to it. What you could do is add code to the oncomplete method so the item is being set readonly again. Another, better, approach would be not to change the attribute clientside but to have hidden fields which are used to store the data.
When you have an event bound to for instance an Link control you can change the oncomplete code by clicking in your source pane on the event tag. When you browse the events section in the properties pane you will see the onComplete, onError, onStart properties. You can add your own clientside script in these properties.

Before trying to overcome the "problem" You shoud try to understand what exactly partial refresh do and where the state of application is kept.
Unfortunately partial refresh is replacing current html content (or rather part of it) with a newly created one and only form fields that has backing controls will keep state.
I suggest You should try setting readonly property on controls which You would like to make readonly (if there is some logic here You can always use ssjs).
Optionally You can try to preserve the state on the client side by using csjs global variables but this is rather hard to manage.
And one more thing - try to use the technology to solve the problem(xpages) and try not to hack Your way through with use of stuff that You accidentally know (jquery).

I would agree with jjtbsomhorst on using onComplete event. But another alternative could be setting the readonly property via code like this:
var textField:com.ibm.xsp.component.xp.XspInputText = getComponent("inputText1");
var readOnlyAttr:com.ibm.xsp.complex.Attr = new com.ibm.xsp.complex.Attr("readonly", "readonly");
var list:java.util.ArrayList = new java.util.ArrayList();
list.add(readOnlyAttr);
textField.setAttrs(list);
You could call this on the afterPageLoad event of the XPage. But I really don't know whether this would be the best way to about!

Related

XAgent breaks previous navigation

If I use
context.redirectToPrevious()
It works great, but If I call an xagent with or without state between opening the document and doing a close of the document. I end up navigating to the xagent.
And If I go directly to the view behind I loose opened categories in the view.
Is there a way to block an xpage to end up in the navigation/history tree?
There are two approaches that would work.
The first is to use client-side JavaScript to open the XAgent. How you handle that will depend on whether there are values set in the browser that you are passing to sessionScope for the XAgent to use. If not, you can just use client-side JavaScript to open the relevant XAgent page. If you do need values, there are two options:
Pass them as query string parameters to the XAgent instead of storing them as sessionScope variables.
Perform a partial refresh to store the values in sessionScope and open the XAgent page via client-side JavaScript either in the onComplete() event (will trigger every time) or using view.postScript(), passing the relevant CSJS as a string (will only trigger if validation is successful).
The second is to set the previous page in the beforePageLoad event and then use that value in context.redirectToPage().

How to pass var variable to custom control

I want to create a generic action bar custom control with Save, Edit, Delete, ... buttons.
How can I pass var variable from xpage to a custom control?
Update
I successfully transferred document object to custom control and I can Save the changes made in document, but I can't delete it with same object.
Update:
<xp:this.action>
<xp:executeScript
   script="#{javascript:compositeData.datasrc.save()}">
</xp:executeScript>
</xp:this.action>
Delete is not working:
<xp:deleteDocument
message="Do you want to delete?"
var="#{javascript:compositeData.datasrc}">
<xp:this.name><![CDATA[#{javascript:var page = sessionScope.get("prevview");
return (page=='')?'home.xsp':page}]]> </xp:this.name>
</xp:deleteDocument>
I tried also with:
var="#{javascript:compositeData.datasrc.getDocument()}">
but also didn't work.
When you define a custom control, you can specify control properties. These properties then show up in the property editor when you insert the custom control into an XPage or another control. You can specify the data type and allow them to repeat.
This is saver than to rely on scoped variables. Check Chris' introduction and the XPages 101 session or and many more for inspiration
You can do it for example with a Scoped Variable. If the variable value is specific to that XPage (and user) viewScope is probably the best.
The above options are the best way to do that, but keep in mind that if you define a variable in a scriptblock or somewhere else in the Xpage, you will be able to access this variable from your code in the CustomControl, too. I think that's because the XPage und the custom Controls are kind of merged when compiled. Keep that in mind, this can lead to very nasty problems, especially with recycling issues.
What is the purpose of this variable ? If its a variable to control which buttons are being shown it would be best to create properties for each button / section. These properties can be computed to either return true or false.
If you want to pass the code that a button should execute I would advice you to generate button bars for the most common locations ( aka actions ) and add custom buttons on the button bar by using a facet (Editable area its called in the designer) .On this facet you'll drag a panel on which the buttons are being placed.

compute dynamically the allowDelete property of file download xpages

I am using a file download control and I would like to set the value of the "allowDelete" property dynamically depending on whether the document is in edit or read mode. However, this
property is computed onload of the page. I tried calling the function "setAllowDelete(boolean)" on the onclick event of a button or the "beforeRenderResponse" event of a custom control and a partial or full update to change the value of the property, but it didn't change.
Do you know if there is a way to do this?
Thanks a lot in advance!
I have encountered the same problem. There are two options to workaround it.
1) To use two controls, one with deletion enabled, the other with deletion disabled, and use rendered properties according to edit state (or user role).
2) Render download controls by your own, as data table or repeat. However, this solution has its own problems, too.
Have you tried just calculating the property like this?
<xp:fileDownload .... >
<xp:this.allowDelete><![CDATA[${javascript:
return document.isEditable()}]]>
</xp:this.allowDelete>
</xp:fileDownload>

Maintaining state between pages in seam

I have a xhtml page with Search criteria and search results. Clicking on search button will dynamically update the results on the same page. I have a controller for search/results xhtml in Page Scope.
There is an edit button in every record in the search results. Clicking on the edit button will open a new page(new controller in Page scope). Once I edit and save I want to come back to the search criteria page with search resutls.
I can store the search criteria in session and requery and display the results. I looked at conversation and I am not sure if I can use it in this scenario?
Any ideas other than dumping the data in session for this scenario?
Pass the search criteria to the edit view as well (but don't display them or something) and then let the edit view pass it back to the search view once editing is finished.
If you want to persist data between two pages, you have many ways:
1) String parameters
2) Session data
3) Long running Conversation
4) Serialize your data elsewhere (DB or other).
Since you are talking about "saving" I may think you are saving your data in a database. If you have persisted your data in the second page in some way you can just query for them.
Otherwise you can use session and conversation, the second has a "smaller" and defined scope. You can decide when to create one and to create destroy. Simply put a in the first page pages.xml and create a bean with conversation scope.
The session scope will keep your data in your session scoped component until you close your browser.
Hope this helps.
I would go with the session scoped bean. If you use a search bean you can go anywhere in your application and maintain your search state, also it lends itself to saving searches in the database (so users can save searches between sessions).
#Scope(ScopeType.SESSION)
#Name("someRandomSearch")
public class SomeRandomSearch {
private SearchObj1 userSelection1;
private List<SearchObj1> searchCriteriaList1;
private SearchObj2 userSelection2;
private List<SearchObj2> searchCriteriaList2;
private String randomUserInput;
// getters/setters, some helper classes, cascade dropdown stuff, etc.....
// clear search criteria
public void reset(){
this.userSelection1 = null;
this.userSelection2 = null;
this.randomUserInput = null;
}
}
Just make sure to implement equals method in your model classes - maybe that's obvious, but when I first started using Seam I missed this little tidbit and it took forever to figure out why we couldn't hold onto dropdown selections in our search pages.
If when you say "open a new page", you mean navigate to another page in the same browser window/tab, then a Conversation is the ideal method for storing the search state.
Depending on your detailed use case, you might prefer to setup nested conversations (when you click on the edit).
You might also want to setup a pageflow to manage that particular navigation logic.
See the official documentation.

MasterPage and UserControl Interaction

I have a situation where I need to update a control referenced in a masterpage from a control that is referenced from the content page. Below is hierarhcy:
MainMasterPage
BreadCrumbUserControl(a user control) - has a public string property
ContentPage(uses MainMasterPage)
DataUserControl
I want to be able to update the exposed property of BreadCrumbUserControl from DataUserControl on pageLoad.
I was able to update the BreadCrumbUserControl property just fine from the ContentPage. When i try to do the same DataUserControl's pageLoad method, the update is ignored because of page life cycle.
How can I go about achieving this? I can think of doing something on the clientside using hiddenField and such, but wanted to see if there is a better solution.
Thanks for your help.
It is possible to do what you are asking but I wouldn't. I would raise an event from the "DataUserControl" and handle it in the page. Then the page class can update the master page's control value. This will reduce coupling of your controls and the page they are used on.

Resources