flex 4 - aligning/positioning the controls dynamically by ignoring invisible controls - layout

I am using flex's layout feature to avoid the coding to align/position. How ever, it looks like though I hide (visible = false) any object, flex treats it as exists and doesn't re-align or re-position the controls as I expected.
I think, I can achieve it if I can add/remove the controls dynamically but I dont want to do that.
Does flex has the feature to ignore the invisible control and align the visibile controls only?
Below is the scenario
I have a with two in it. Either "any one" or "both" the buttons will be visible depending on the logic. No problem if I have to show both the buttons because they will be properly aligned. But if I have to show only one, the positions remain same as if both are visible.
Is there any way exists to re-align the controls when I hide/show something dynamically? That without having to add/remove
<s:Group width="100%" id="pricesGroup">
<s:layout>
<s:HorizontalLayout gap="5"/>
</s:layout>
<s:Button id="btnCoins" label="{coins.toString()}" chromeColor="#94E749"/>
<s:Button id="btnFlux" label="{flux.toString()}" chromeColor="#3B8DC7"/>
</s:Group>

You need to also mark the component out of the layout
<s:Group includeInLayout="false" />
if not, the component will keep reserved some space in the layout.

Related

Customized ComboBox Style in DatagridTemploateColumn.CellTemplate

I have customised a default ComboBox Style by using DataGrid in the popup (dropdown) as described here.
When I use the customised style in a ComboBox or in a DatagridComboBoxColumn, it works fine.
Similary when I use the style in the DataGridTemplateColumn.CellEditingTemplate, it works fine.
However, it does not work when used in a DataGridTemplateColumn.CellTemplate. The selection does not work at all. It is as if the selection changed event does not fire.
I tried setting the IsSynchronizedWithCurrentItem="False" in the ComboBox, still it does not work.
Funny enough when I use the default ComboBox style in DataGridTemplateColumn.CellTemplate, it works. It appears the problem is when Datagrid is used as an ItemsHost.
The reason why I want to use it in a DataGridTemplateColumn.CellTemplate is because I want to change the look of my application by not using the standard DataGridComboBoxColumn where the editing part is hidden and one has to dig deeper to exopause the comboxbox. I want the user to click once to select items from the combobox.
Similarly the DataGridTemplateColumn is wired in such a way that the CellEditingTemplate is underneath the CellTemplate (which is similar to the default DatagridComboxBox). What I want instead is to use the DataGridTemplateColumn.CellTemplate for both viewing and selecting (editing).
At the same time I don't want to use the default ComboBox Style by replacing the ItemsHost with a Datagrid. But the customised style does not work in a DataGridTemplateColumn.CellTemplate. It only works in DataGridTemplateColumn.CellEditingTemplate
Any dies?
I resolved it by inserting these two lines in the Datagrid
SelectedItem="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedItem}"
IsSynchronizedWithCurrentItem="False"

Hiding a tab from the user interface dynamically

I have a page with a PXTab control and want to show or hide individual tabs on the page dynamically. How can I control visibility of tabs at runtime?
You can do it in one of the following two ways:
By setting a VisibleExp property on PXTabItem in ASPX page
By
enabling/disabling AllowSelect property of the view that serves as a
DataMember of the grid that is displayed on that tab
Method 1 – VisibleExp
In this method, you directly write the conditions under which the tab should be visible in the screen's ASPX code.
<px:PXTabItem Text="Tax Agency Settings" BindingContext="tab"
VisibleExp="DataControls["chkTaxAgency"].Value = 1">
Note that the binding context is important as it specifies which element's DataControls you want to access in the VisibleExp.
Also DataControls is collection of values for user interface fields, so you need to specify there IDs of controls (not data access class fields).
However, this method is extremely limited in many ways:
The condition checking is restricted to controls available in the UI,
so it is not possible to condition visibility upon the internal state
of the system.
Sometimes this method will require you to include
"fake" data controls into ASPX that will only be checked in
VisibleExp, but won't actually be ever seen by the user.
There seem to be no support for complex conditions including AND/OR.
Ugly " entities instead of normal quotes in the expression – not
particularly readable.
Most importantly, if you need to disable the tab for a particular document type, there is no way around hard - coding a constant into a VisibleExp. You would be explicitly writing something like: VisibleExp="DataControls["edDocumentType"].Value != CHK"
Hard-coding is generally considered a very poor development practice. It poses a significant threat to code maintainability: probably the above code is going to break something in the future. For example if you decide to rename the document codes form CHK to CHQ.
In addition to that, this solution is not easily generalized to situations when you suddenly discover the need to hide the tab not only for checks, but also for other document types. This is due to lack of complex conditional expressions mentioned above.
Method 2 – AllowSelect
Idea of this method is - if you hide all controls from the tab item, than Acumatica will automatically hide tab with no visible controls.
Lets do an example: assume that you need to hide a tab named Applications depending on the document type selected in SO303000 (Invoices):
The tab that we're interested in has a grid control with a data member set to Adjustments:
<px:PXTabItem Text="Applications" RepaintOnDemand="false">
<Template>
<px:PXGrid ID="detgrid" DataSourceID="ds" SkinID="Details">
<Levels>
<px:PXGridLevel DataMember="Adjustments">
............
</px:PXGridLevel>
</Levels>
</px:PXGrid>
</Template>
</px:PXTabItem>
And not that this tab item has only one control - PXGrid.
Also note required property here - RepaintOnDemand="false". This property indicates whether the control refresh tab items content (and select data) after the item becomes visible. Unfortunately, setting it to false incurs certain performance losses. In particular, the Adjustments view' Select will be called much more frequently.
Currently, the Tab is "smart" in the way that it understands that when its child control (PXGridLevel) cannot perform a select on its data member; in this case, the tab hides itself from the UI. This is why you can control the visibility of the tab by setting the AllowSelect property of the cache that corresponds to the Adjustments:
Adjustments.Cache.AllowSelect =
doc.DocType != ARDocType.CashSale
&& doc.DocType != ARDocType.CashReturn;
The above code is written in the ARInvoice_RowSelected handler of the graph, where ARInvoice is the primary DAC and the type of the master records of the page. So, every time ARInvoice is selected, the tab item will become visible or invisible depending on the document type.
This method has its own limitations too:
You should always remember that it is not enough to disable
AllowSelect, you should also enable it when needed. So you need to
evaluate this property every time when event is called.
This method doesn't seem to work without setting the PXTabItem's RepaintOnDemand
property to false (see above).
Source: http://asiablog.acumatica.com/2016/05/hiding-tab-from-user-interface.html

changing styleclass and disableoutputtag on panels within a facet using themes

I am not an expert on themes but i would like to know if it is possible to accomplish that:
Once i pull a panel into a facet i am hiding the panel by disabling the output tag and setting a special css class only for the designer client.
Has somebody tried to do that automatically in themes by checking if the panel is in a facet(Maybe ask for the key: property)?
I have tried to change the panel but i dont know how to set a certain style class based on a property of the panel.
To my best knowledge: A theme styles content rendered, not attributes that define if content gets rendered or not.
You have 2 options you could use:
create your own little extension library with controls you want to use everywhere. Add one 'containerPlaceholder' (or whatever you would call it) that doesn't render any own output, but only it's children.
use a snippet you simply paste into your source code.
don't use a panel or div, but add your custom controls to the callbacks. Makes your XPage more readable (that's what I do)
Hope that helps

Dynamically add / remove editable area to custom control embedded in XPage

Okay... this is a little difficult to explain but I will try my best.
In Custom Control while adding properties in Property Definition we can set "Allow multiple instances" which allows us to add multiple instances of that property when the control is embedded in XPage.
Similarly, I need to know whether it is possible to add (and remove) Editable Areas in a custom control when it is embedded in XPage? What I plan is that I would have a repeat control inside my custom control and I would be able to put the contents in each editable area in every loop of that repeat.
Is this the right way to go about or am I looking at this problem incorrectly? Any solution not involving editable areas is also welcome :)
Update 4 Apr 2013:
A use case context I am looking for is a simple carousel where contents of each screen in carousel can have different contents. These contents would be put into each (dynamically added) editable area. The contents can be very different from each other with one screen containing only text, other only image and another both image and text.
Look at the table walker example in the 26 original exercises. It does mostly what you are looking for (conceptually). You won't need multiple editable areas. Whatever is inside the repeat gets repeated.
What you want to do is to give the control a custom property "boolean editMode" so you can render that one line to be edited - if that's the UI pattern you want to follow.
You also could consider a dojo table with Ajax which allows for a familiar spreadsheet UI

How can a graphic be placed in the OneUI .lotusBanner area using the Application Layout Control

I am using the Extension Libraries Application Layout Control and need to have a banner graphic placed in the .lotusBanner div on the right. How can this be done as it seems that the Application Layout Control can't be modified.
You could use the utilityLinksFacet on the extended control that Steve Pridemore did.
http://www.openntf.org/internal/home.nsf/project.xsp?action=openDocument&documentId=CED2E61A75526CD086257997006DA95B
or you could use onload javascript to add it.
I was able to place a graphic in the upper right of the Application Layout Control in the Banner area by doing the following:
In the control under the Banner > Utility links I added a Basic node. For the node I specified the href and image. This worked and placed the image n the correct spot.
Artifacts of this were the location of the Banner Application links. To remedy this I used some CSS for the .lotusBanner ul.lotusLinks {margin-top: 45px;position:absolute;}
The margin-top was to push the links down so I could enlarge the logo that is used by the Application Layout Control.
The applicationLayout control in ExtLib is, as you have found out, locked down to only allow certain aspects of the configuration to be changed by the developer. You can add links to different sections of the applicationLayout but nothing beyond that.
One possible alternative is to NOT use the applictionLayout control itself but create your own approximation of it in a custom control, You would need to add all the necessary panels/divs with the special oneUI2 classes in all the correct places and then add editable areas and callbacks within these panels for the parts that you would want to customize throughout the application. All of the other sections in the applicationLayout control, like the bannerUtilityLinks are created using the ListofLinks control that is also found in the Extension Library.

Resources