On a Google appmaker table, I have a label that I only want visible when the row is active/selected by the user.
I can see that the datasource.itemtIndex would give me the current index that my label is at (I presume it's not the selected index), but I can not seem to find a property that shows me the currently selected index/row.
Bind the visibility of the label like this ==>
#widget.datasource.item._key === #datasources.<DatasourceName>.item._key
Just make sure to change <DatasourceName> with whatever datasource you're using.
Try adding this style
visibleOnAncestorHover
to the label styles. This should make it visible both on hover and when selected. (This is used by default on Table widget's row delete buttons, I think.)
EDIT: and remember to have the 'visible' setting on for the label.
The only way I found to do this is to set the visible binding on your label, of course you would want to set your visibility type to absent (will mis-align your table rows to labels) or hidden (will just hide the label). This solution is different from the 'visibleOnAncestorHover' as the label will still be hidden on other rows when you hover on those rows, it is only visible when the row is actually selected. The only binding that seems to work is this:
#datasources.YourDatasource.itemIndex === #widget.parent.childIndex
The following apparently does NOT work:
#datasource.itemIndex === #widget.parent.childIndex
or
#widget.datasource.itemIndex === #widget.parent.childIndex
Please see the picture below:
You can specify this in the style editor:
.app-NewPage-Table1Row:not(.selected) .app-NewPage-Field2 {
visibility: hidden;
}
Related
I have a form which contains multiple input widgets like textbox, dropdown, textarea, suggestbox, radiogroup and multiselect etc
The input widgets are by default in disabled state.
When I click on a button all of them get enabled.
I would also like their text-color to change when I click on that button.
Note: I dont want to change the widget's label color. Only the value color.
How to do it in code for each? If you could give one example for each widget i.e textbox, dropdown, multiselect,radigroup etc
Looking for a generic solution.
Say you want to change your text box text red when you click the button. add a class to your styles tab like
.red{
color: red;
}
then say you have text box called textbox1 in the onclick event of your button put the following code:
widget.root.descendants.textbox1.styles = ['red'];
same for all the other types
To give you an idea I was testing with TextBox and worked but with TextAreas the Input or Value did not change, as well as the other multiselect and radioGroup options it did not take the css as expected.
When you click on the text box and from the CSS Page Style you start typing "." you will find different options for the widget selected. Using TextBox there is an Input option so you create a Global Style like this one.
.color Input{
color:teal;
}
This will change the Input of the TextBox, the same as if you do with Label, just use the same css class just change the option you want to modify. .color Label {}.
Also to apply the change to the widget just create a function like this one.
function textBoxColorChange() {
app.pages.NewPage.descendants.TextArea1.styles = ["color"];
}
And create an OnClick event to a button to make the change.
With the other widgets I don't have the time to keep testing but I hope this helps to get the idea. Greetings.
Haven't coded in years, and started to play around with Google App Maker last week. As the title suggests, I have a couple questions.
I'm trying to figure out if there's a way to dynamically change the color of a button upon click. Right now I have the button changing enabled status to false on click, and using CSS style to change the color of disabled buttons to gray. Is there a way to do this without disabling the button?
Is there a way to wrap text in a button? Right now I am overlaying a Label on the button with the correctly styled font, but would ideally like to have that text be from the Button, as the space the label takes up is not clickable.
Thanks in advance for any help!
add some lines to your page or global styles this
this should let you wrap text.
.app-Button {
white-space: pre-wrap;
}
Say you want to change your button blue when a Boolean value gets changed to "true" in your data source.
add a class to your styles
.blue{
background: blue;
}
then select your button and in the property editor>Display>styles click the drop down and select binding
set the binding to
=#datasource.item.**YourBooleanItem** === true? ['blue']:[]
Clarification there are two steps
Define a CSS class
Add the Class to the "styles" property of
your widget.
The Answer above uses a "binding" but also means that you've got to have an Item with this binding which you may not want.
I wanted a 'decimal' button to be orange when it was active. So on the Page I created a DecimalActive property. I used the onAttach event to set this property to false.
I created a CSS Class (local to the page) named Orange and Normal
.Orange {background:orange};
.Normal {background:white};
Then the following is my onClick
onClick(widget,event)
{
widget.root.properties.DecimalActive = !widget.root.properties.DecimalActive;
widget.styles = widget.root.properties.DecimalActive ? ['Orange'] : ['White'];
}
The challenge was figuring out exactly what AppMaker wanted in the styles []. I don't think it puts applied styles in this array. At least they didn't show up when I console.log(JSON.stringify(widget.styles);
I have verified that this does work (Dec 2019)
I think this answer is clearer and if someone wants to bind it the color change they still can.
I am new to angular 4 and I started working on angular multiselect and using the following npm package
https://www.npmjs.com/package/angular2-multiselect-dropdown
I could able to configure this properly and also getting the selected and deselected items/events.
Now my problem is to show only the placeholder text even though there are selected items or not. I want to ignore the selected items to be shown on the top.
If any item is selected from the item the multi select box is converted like the below
But I would like to keep the placeholder same like below if there are selected items or not.
I have been trying to get out it with responsive behavior. But not able to find the solution. Please help me.
Currently, it looks like the feature is not there. However, there is a work around.
Workaround
You could hide the list that is shown. In your CSS, you can add this:
.c-list{
display: none;
}
This will not display back the 'Select Countries' placeholder, but it will partially achieve what you are trying to do.
Work Around
Hide the list using CSS
angular2-multiselect /deep/ .c-list {
display: none;
}
If you don't want the select items list growing, you can limit the number of badges shown by adding badgeShowLimit in the dropdown settings
I have a table with inputTexts and comboBoxes within it. In edit mode is all working fine, but in read mode, the text within the comboBoxes seem to have padding, but they don't. I checked with Chrome and it seem that the combobox has, by default, another element inside it, a table which contains the text.
Question: How can I remove that table inside the combobox in order for the elements to align better, withouth having to put margin-left and margin-top to the combobox?
Use custom renderers (which is the most elegant way but also advanced).
http://openntf.org/XSnippets.nsf/snippet.xsp?id=remove-table-tag-for-listboxes-in-read-mode-for-all-instances-in-one-go
You can use the rendered property. Show comboBox only if document is in editmode
rendered="#{javascript:document1.isEditable()}"
and add a computed field which shows the value as plain text with the rendered property
rendered="#{javascript:!document1.isEditable()}"
As an alternative, you can use Brad Balassaitis' solution from his blog. He deletes nested tables onClientLoad.
Or, you work with css classes.
On some of my pages I am setting focus on a first input element:
$(':input:visible:first').trigger('focus');
If the first input element is a checkbox or a radiobutton it receives a focus fine but that's not clearly visible, so it's label is not highlighted and screen reader doesn't recognize that, too, i.e. it doesn't read out that field. Is there any way using JQuery to make focus on checkbox or radoibuttons more pronounced?
Can't you assign a suitably clear css class to it?
$(':input:visible:first').focus(function() {
$(this).addClass("superClear")
})
.blur(function() {
$(this).removeClass("superClear");
}).focus();
Also, this might be helpful:
How do I style (css) radio buttons and labels?