I'm new to Webix and trying to create a list or dataview where users can add and remove itens. (font files this time)
For such i defined one "add" button and one list where previously added items are displayed.
My plan was to put an label and a exclude button into each item of the list with the components Webix already provides but to my surprize the template property of data components aparentily can't be definied with ui objects itself.
There is some way to do it?
Somethink like it:
webix.ui({ id:'stage', rows:[
{ view:"button", type:"icon", icon:"plus", label:"Add Font", autowidth:true, click:AddFont },
{ view:"dataview", id:"fnt_list", data:fonts(), width:300,
type:{ width:300, height:150, template:function(fnt)
{
return webix.ui({cols:[
{view:"label", align:"left", label:fnt.fileName },
{view:"button", type:"icon", icon:"trash", label:"Exclude", align:"right", autowidth:true }
]});
}}
}]});
I know it can be made with the layout component alone but i really would like to do it with one of the data components because of the paging feature they have.
While it possible to create a separate instance of webix UI for each row, it is overkill for your task, just use HTML markup in the template. Something like next
{ view:"dataview", css:"fonts", id:"fnt_list", data:fonts, width:300,
type:{
width:300, height:150,
template:"#fileName# <i class='fa fa-trash-o'></i>"
},
working snippet - https://snippet.webix.com/dvbdt6st
If you still want to have real UI widgets inside of dataview items, check
https://docs.webix.com/desktop__data_layout.html
and
https://docs.webix.com/desktop__active_content.html
Related
I'm using Acumatica customization Acumatica-LotSerialNbrAttribute
This customization adds a new screen for look for InventoryID and LotSerialNbr and visualize its attributes.
I'm trying to add this window to the acumatica mobile app.
Here my code:
add screen IN202501 {
add container "InventoryLotSerialContainers" {
add field "InventoryID"
add field "LotSerialNbr"
add group "Attributes" {
displayName = "Attributes"
collapsable = True
add attributes "AttributesAttributes"
}
add recordAction "Save" {
behavior = Save
}
add recordAction "Cancel" {
behavior = Cancel
}
attachments {
}
}
}
And the screen is visible on the mobile app with the 2 selectors
Then I select Inventory and when I select Lot Serial Nbr, the first selector is in blank, causing that I can't review the attributtes neither save the information.
Here the InventoryID selector in blank.
Hope you can help me to successfully publish this screen on acumatica mobile app.
Thanks.
Attributes are a grid style representation in Acumatica. That means you need a container that will show multiple records. I'm getting rusty on mobile pretty quickly, but I believe your definition is set to display a single value value only.
Try adding a separate container for attributes:
add container "AttributesAttributes" {
add field "Attribute"
add field "Value"
}
This should open into a view of multiple records, showing all of your attributes. By specifying the Attribute and Value fields, you should see both data elements in the container.
I have a list of items listed using iron-list.
The items in the iron-list are expandable, for every item there is an edition form.
There is also the possibility of creating a new item by pressing a general 'Add' button. Then, a new item will be added to the list using the method this.push('items', newItem).
The push of the new item works fine, the list is updated.
I would like that after pushing a new item the form corresponding to the item to expand immediately. So when the user want's to create a new item to see the creation form right away.
In order to expand the form for an item I simply grab the index of the iron-list from the DOM (item 0 index 0, item 1, index 1...), then I add a css class that will expand it.
The problem that I have is that between the pushing of the item and the calling of the method that will expand the item, the DOM isn't rendered yet so there is no index in the iron-list corresponding to the newly created item.
Is there a part of the element's lifecycle that I missed?
After research I didn't found methods for forcing the rendering of the iron-list or the refresh...
Could anyone give me an idea about how to expand the form immediately after pushing the item into the array?
This code expands whenever the the expanded variable equals the ID, requires unique IDs, could be name or whatever(I'd advise using whatever your database provides). Automatically expands the object by setting expanded equal to the ID of the recently created object.
<dom-module id="my-list">
<template>
<iron-list items="{{myItems}}">
<my-item
on-tap="select"
expaned="[[areEqual(item.id, expanded]]">
[[item.name]]
</my-item>
</iron-list>
.... add stuff ....
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'my-list',
properties: {
expanded: {
type: string,
value: ""
}
},
onAdd: function(adding){
... adding code...
this.expanded = this.adding.id;
},
areEqual: function(a, b){
return a === b;
},
select: function(e){
this.expanded = e.model.id;
}
})
}())
</scipt>
I'm trying to make my Sitecore site compatible with page editor i.e. all the fields text, rich text editor, etc, should be able to be updated in Page Editor.
So far I've modified the TDS T4 template which returns a HTMLString for each field like below:
public HtmlString HeroImageField(bool isEditable = true, string parameters = "")
{
string renderParameter = GenerateRenderParameter(isEditable, parameters);
return new HtmlString(Sitecore.Web.UI.WebControls.FieldRenderer.Render(
Sitecore.Context.Database.GetItem(this.EntityId.ToString()), "Hero Image", renderParameter ));
}
So, in view I just call Model.HeroImage()
Is there a better way to achieve above? Maybe Glass Mapper comes with out of box support for this (which I don't know).
Sitecore comes with MVC helpers that you can use to make fields editable:
#Html.Sitecore().Field("My Field Name") //Context item by default
#Html.Sitecore().Field("My Field Name", Model.PageItem) //Explicit page item
#Html.Sitecore().Field("My Field Name", Model.Item) //Datasource item (may be context item)
My recommendation is also to use a controller to load a different view for editing. There is often a different visual needed for authoring fields. Carousels/tabs should be flattened out, validation messages need to be exposed, etc.
See more at:
http://sitecore-community.github.io/docs/sitecore-mvc/rendering-content/
Glass mapper has something OOTB for that. You can use the extended WebViewPage GlassView and use the Editable methods as described here:
http://glass.lu/Mapper/Sc/Tutorials/Tutorial14
I have a SPEAK UI dialog with a ListControl bound to a custom JSON datasource. This works and the ListControl is correctly populated. My JSON data looks something like this:
[
{
"itemId":"{BA26159A-194D-4A3C-9D1A-DA9472F11BE0}",
"selected":true
},
{
"itemId":"{E651D0CD-0E7E-4903-8E26-0D1D5A168E69}",
"selected":false
},
{
"itemId":"{E651D0CD-0E7E-4903-8E26-0D1D5A168E70}",
"selected":false
}
]
Is there a way to ensure the relevant row of the ListControl is selected ("selected":true) when the dialog loads?
You can set the ListControl's selected item ID like this: this.MediaResultsListControl.viewModel.set({selectedItemId:"ITEMID"})
(Sitecore.Speak.app instead of this during dubuging in the console)
If you call this.MediaResultsListControl.viewModel.selectedItemId() you can see the selected item has been set by the above method.
Wondering on page load, if you can set the ListControls selected item id, from the page code manually using this method?
Looking at the JS for the list control. It calls this on click of a row. Wonder if you can replace this to trigger selected row?
selectRow: function (row, rowModel) {
this.$el.find(".active").removeClass("active");
row.addClass("active");
this.model.set("selectedItem", rowModel);
this.model.set("selectedItemId", rowModel.get("itemId"));
},
I am using Orchard to create a table-like layout. I have defined two content types: 'Row' and 'Column'. To allow items of the type Column to be added to a Row I added the 'Container' part to the Row and 'Containable' to the Column.
All works fine, the columns show up in the row they were put in, however Orchard renders list tags around my columns which mess up my layout. Is it possible to prevent these list tags from being rendered? I checked out the source of ContainerPartDriver.cs but the 'listShape' seems to be baked in, however I hope someone can prove me wrong.
For now I am retrieving the container items and displaying each one in the view itself.
#{
var contentManager = WorkContext.Resolve<IContentManager>(); ;
var container = (ContentItem)Model.ContentItem;
var query = contentManager
.Query(VersionOptions.Published)
.Join<CommonPartRecord>().Where(x => x.Container.Id == container.Id)
.Join<ContainablePartRecord>().OrderByDescending(x => x.Position);
}
#foreach (var item in query.List())
{
#Display(contentManager.BuildDisplay(item, "Detail"));
}