Excuse the confusing language but hopefully this makes sense: (see code for more clear explanation)
I have a requirement to display a list of "spare parts" in an sap.m.Table but there is the ability if one of these "spare parts" has a related "spare part" (e.g. A heavy duty version, a light version, etc) , that you can click a button on the row and display these related "spare parts" by inserting them immediately below the "spare part" in question.
While I can get the sap.m.Table doing what I want to do, I would like to take advantage of templates and binding to create a temporary sap.m.Table; bind it to the relationship that returns these alternate spare parts; and reuse the template for a row to give me an array of ColumnListItems which I can insert into the Table at the right place.
Unfortunately, doing this, a sap.m.Table has a feature that if it is not displayed, it doesn't actually make the Odata call and leverage the template function.
To explain possibly much clearer, refer to this jsbin:
http://jsbin.com/sihofu/4/edit?html,js,output
Any better ideas on how to generate template output for a binding without using a sap.m.Table; or alternative, getting the sap.m.Table to make the call without placing it on the screen visible (temporarily)?
The specific code to look at is as follows:
var oTable2 = new sap.m.Table();
oTable2.attachUpdateFinished(function() {
console.log("But this one doesn't");
// What I'm trying to do here is insert these entries below Key 1
});
oTable2.bindAggregation("items", {
path: "/ExampleSecondaryValues",
template: oTemplate,
});
Thanks,
Matt
Back from Holidays now and solved this problem with a bit of brute force by simply enhancing/extending the sap.m.table control slightly.
The problem was if the control was invisible, nothing was rendered, and some optimisation within UI5 core means that in the case nothing is rendered, the AfterRender event is not called on the control and this event is what fires the UpdateFinished event.
I won't debate whether that optimisation is appropriate or not, but to fix this I simply extended the table control with a new control which looks like as follows:
sap.m.Table.extend("my.InvisibleTable", {
renderer: function(oRm, oControl) {
oRm.write("<span");
oRm.writeControlData(oControl);
oRm.write("></span>");
}
});
e.g. Simply always rendering something in the render function, causes the AfterRender event to be called; which in turns allows the sap.m.Table to fire the UpdateFinished event which allows me to then safely get the rendered template items to insert in my visible table.
Would love to know a much better way of doing this (possibly using the template control or similar), but this works okay to solve the problem.
Cheers,
Matt
Related
The 1.66 (March 2022) release introduces a TreeDragAndDropController API which allows for handling drag & drop events for custom tree views.
However in the docs for the DataTransfer object is says:
Drag and drop controllers that implement {#link TreeDragAndDropController.handleDrag handleDrag} can add additional mime types to the data transfer. These additional mime types will only be included in the handleDrop when the the drag was initiated from an element in the same drag and drop controller.
Does this mean that you cannot drag & drop between custom tree views as they would typically have a custom drag & drop controller per view? Or that you're meant to re-use a drag & drop controller between tree views in order to enable dragging & dropping between views?
I have tried various combinations and been unsuccessful in getting a full drag & drop between two tree views. I do see an error in the console on drop in some situations but that is about it.
It took me a while to figure out how to get drag & drop to work between two different treeviews. For me, the problem was a combination of:
Misunderstanding the purpose / usage of dragMimeTypes.
Misunderstanding the purpose / usage of treeDataTransfer.set().
Using an incorrect naming convention for mime types.
This is probably best described by way of example.
Let's assume we're only going to drag from TreeView_A and we'll only drop onto TreeView_B.
For TreeView_A
dropMimeTypes can be an empty array as we're not expecting to receive any drops.
We don't really need a handleDrop() method, again we're not expecting to receive any drops.
dragMimeTypes needs to include the mime type of the treeview that we're going to drop onto (i.e. TreeView_B). A word of warning here, this MUST be in the format application/vnd.code.tree.<treeidlowercase>. So, for this example it would read something like this:
dragMimeTypes = ['application/vnd.code.tree.treeView_b'];
handleDrag() method needs to set using a mime type of the target treeview (Treeview_B), (remember lowercase!)
public async handleDrag(source: TreeItem[], treeDataTransfer: vscode.DataTransfer, token: vscode.CancellationToken): Promise<void> {
treeDataTransfer.set('application/vnd.code.tree.treeView_b', new vscode.DataTransferItem(source));
}
The lowercase requirement seems more like a suggestion if you read the comments in the underlying code... but no from my experience it seems more like a requirement. Had me stumped for ages!
For TreeView_B
dragMimeTypes can be an empty array as we won't be dragging anything from here.
similarly, we don't really need a handleDrag() method.
dropMimeTypes needs to include the mime type of the treeview that we're going to drop onto (i.e. this treeview, TreeView_B)
dropMimeTypes = ['application/vnd.code.tree.treeView_b'];
the handleDrop() method needs to get the correct mime type (you guessed it, Treeview_B in lowercase). In this method, I just log to console.
public async handleDrop(target: TreeItem | undefined, sources: vscode.DataTransfer): Promise<void> {
const transferItemAppContent = sources.get('application/vnd.code.tree.treeView_b');
if (transferItemAppContent) {
console.log(JSON.stringify(transferItemAppContent));
return;
}
}
I'm still not sure that I've 100% understood how this is supposed to be implemented, but I can tell you that the above method works. Hope it helps.
The attached screen below works just fine but underneath the covers I have a slight problem ^^
Smartform with both simple and smart fields
Behind the view there's a smartform (no annotations used). Field "Agreement Action Type" and the last two pairs of fields are not smartfields (found no "smartcombo" or something similar to use) they are just pairs of labels and comboboxes and here comes the issue. While the smart fields were all perfectly aligned, comboboxes (aka simple fields I suppose) were not aligned along. In order to solve this for the moment, I used a couple of SAPUI5 formatting classes and...width declaration in pixels in the combo definition within the view. Results works fine, even in different size monitors but, even though I'm currently in the process of learning and understanding the technology, I already know that the latter is a crime against SAPUI5. Is there a way to align smart and simple fields in the same view (or an equivalent dropdown control for smartforms alternatively) or I will have eventually to get rid of my smartform (losing small bonuses like the togglable attribute) and use a simple form instead?
Thanks for taking time to read it.
Regards,
Greg
The GroupElement aggregation manages the SmartLabel for you so try to remove the label inside the GroupElement aggregation like this:
<smartForm:GroupElement label="Label">
<Input type="Text" value="someValue"/>
</smartForm:GroupElement>
On the contrary, if you want to change the appearence of your SmartField, you can use ControlType to configure the internal control.
I need to make a page in SuiteCRM (v7.9 -- based loosely on Sugar 6.5 CE) that has a list of objects (of a custom module), with checkboxes in front of each one. So far, so good: that's a standard ListView.
The catch is that only some records should be in the list (filtering on whether there is an associated row in a related custom module/object).
This page needs to be distinct from the "regular" list for this module, which should indeed list all records.
It seems to me it makes sense to use a custom "action" to access this page view, and I can get my custom action code to fire with the right URL.
But I don't see how to hook in the filtering. At first, it looked like the process_record logic hook might be helpful here, but it just gives the bean for every record to be displayed. Unless there's a flag "display this record" that I'm not seeing, that's not so helpful.
Ideally, of course, I'd like to be able to inject a different WHERE clause in my custom controller action before calling
parent::action_listview();
to display the page, but I'm not seeing doc to indicate how that might work. I would include source code, but so far, the line above is everything (but boilerplate) that's in the controller.php file.
Create a copy of listview in custom folder and then override the listview's listViewProcess() method and insert your query there:
function listViewProcess() // generating listview
{
$this->processSearchForm();
if($this->where==''){
$this->where.="leads.status='Converted'";
}
$this->lv->searchColumns = $this->searchForm->searchColumns;
if(!$this->headers)
return;
$this->lv->setup($this->seed, 'custom/modules/Leads/ListView/ListViewGeneric.tpl', $this->where, $this->params);
echo $this->lv->display();
}
More info: http://wiki-crm-forum.com/forum/viewtopic.php?f=2&t=9420&p=32674&hilit=listViewProcess&sid=21907ecd28734a726f61f7017a7e9a24#p32674
Another tested working example can be found here:
How to hard code the where condition in list view ,basic search,advance search in sugar CE
P.S: I'm not so sure about "v7.9 -- based loosely on Sugar 6.5 CE" I'd say it's 95% identical apart from API stuff
for custom modules in SuiteCRM.
You may change in function create_new_list_query.
I have sap.ui.table.Table which rows are bound to an JSONModel.
var oListModel = new sap.ui.model.json.JSONModel();
//oTable created here (sap.ui.table.Table)
oTable.setModel(oListModel);
oTable.bindRows("/");
When the table is rendered, i.e. the DOM is created for this table, i need to reference to the DOM to pass the DOM elements (table rows) to a library which will make them draggable.
My problem is: How do i know when the DOM for the table is created after the model has been changed and the table is rerendered? I didnt find any listener. The view controller's listener onAfterRendering() didn't help me.
The model is filled with data after a XMLHTTPRequest is successful. When i set the model in the success handler of the xht request and try to access the DOM elments directly afterwards they don't exist yet.
Thank you for your help!
You can add an event delegate
var oMyTable = new sap.ui.table.Table();
oMyTable.addEventDelegate({
onAfterRendering: function() {
$table = this.getDomRef() ....
}
});
a better way is to extend the control see Using addDelegate to extend a control to use third party functionality
UPDATE
the example in that blog doesn't work anymore fixed here
I had a similar issue recently where i had to access an element after a smartform (where the element is present) rendered onto the view. I posted my query here as well as my final solution (based on the accepted answer of #Dopedev). I am using XML views - including nested XML views - here however and the onAfterRendering didn't help for me as well.
I guess you could look at this solution - like it's mentioned in the accepted answer, it may not be an optimal solution, but it sure works. In my case there is not much of a performance issue with the binding of the DOMNodeInserted since it is being called in the onAfterRendering of the nested view that consists of only the smartform with an immediate unbinding upon finding.
The condition if (id === "yourtableid") { } should be enough to identify and pass on. Since you have a table and thus several child nodes, unbinding is imperative at this point.
Mutation Observer is the preferred method but i guess you may need to check the browser compatibility table at the end of the page to see if it matches your requirements. There is an example here. I have used Mutation Observer (outside of a SAPUI5/openUI5 environment) earlier and found it very convenient(and performant) to listen to DOM insert events. In fact the sap.ui.dt package consists of MutationObserver.js
I have a window with a search form at the top and grid at the bottom.
User can enter values in the search form and click button - Get Records.
At the click of this button, I load the store of the grid by passing the values in form fields as parameters in following way:
store.load({
params:{
key1:Ext.getCmp('field1').getValue();
}
});
I tried giving parameters in the store proxy itself, but it unfortunately always takes up initial values (values when the form is rendered) and not the latest one entered by the users in the form fields. Following is the method I used for assigning values to params while creating the store:
extraParams:{
key1:Ext.getCmp('field1').getValue();
}
I wanted to seek guidance at two things:
a. While defining a store, can I ensure that store takes latest/current values from the form fields before querying server, so that I don't have to provide these values while calling load function?
This becomes more necessary as I have a paging toolbar at the bottom which carries a refresh button (along with next, last, previous, first icons for navigation).
Now, whenever user clicks at refresh (or any navigation icon), the store gets loaded without the query parameters.
Thus the second thing is:
b. If the answer of 'a' is that - Pass the latest values to parameters manually when calling load function - then how can I write the handler for 'refresh' button and navigation icons (that is, next, last, previous and first) in the paging toolbar, so that I can pass the latest form values to load function.
Thanks for any help in advance.
PS: I am using ExtJS 4.
yourStore.on('beforeload',function(store, operation,eOpts){
operation.params={
status:cmbStatus.getValue(),
value:txtBuscarPor.getValue(),
empresa:'saasd',
app:'dsads'
};
},this);
Related to your question (b) (and because you especially asked for this in the comments section):
I see only one standard way to hook into the PagingToolbar button handlers which is very limited.
Ext.toolbar.Paging fires a 'beforechange' event before it actually changes the current page. See API docs. A listener that returns false will stop the page change.
All other methods require extending Ext classes which wouldn't be a problem if the ComboBox would make it easier to use your own implementation of BoundList (which is the class that renders the dropdown) or pass through config parameters to BoundList resp. the paging toolbar.
I tried to bring this lack of flexibility up on the Ext message board once but was pretty much ignored.
A possible solution for this is to use 'beforeload' event of the store and provide the list of parameters in it. This way, whenever the store is loaded, then its beforeload event is fired and the values picked up are always the latest. Hope this helps someone looking for something similar.