I already have a barplot ui5 vizframe, but I would like to allow the user to select some of those bars, add each element id to a list and then send the list through a button in order to display a more detailed graph on a fragment.xml view.
On my picture example, the selection is mathematics, ASP and C#.
Here is the view.xml for the main graph panel:
<f:Card class="sapUiTinyMargin tileLayout" width="96%" visible="{config>/useFeatureEnableDemoFunctionality}">
<f:layoutData>
<grid:GridItemLayoutData gridRow="span 2"/>
</f:layoutData>
<f:header>
<card:Header title="Skills popularity" subtitle="List of skills and tools ordered by how many people mentioned it in their profile"/>
</f:header>
<f:content>
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}" height='100%' width="100%" vizType='bar'>
<viz:dataset>
<viz.data:FlattenedDataset data="{path:'/PopularSkills', length: 30, sorter:{ path: 'MembersCount', descending: true }}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Label" value="{Label}"/>
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Popularity" value="{MembersCount}"/>
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure" values="Popularity"/>
<viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="Label"/>
</viz:feeds>
</viz:VizFrame>
<!--<Button icon="sap-icon://log" class="sapUiTinyMargin" text='Analyse selection' press="ButtonSkillSelection"/>-->
</f:content>
</f:Card>
Rendered chart:
[
This is a method to retrieve selected items in the VizFrame:
<Button press=".onPress"/>
onPress: function(){
const selectedSkills = this.getView().byId("idVizFrame").vizSelection();
//Do something useful with your selection
}
Related
I'm using d3.js to draw a layout graph like this one: https://bl.ocks.org/mbostock/950642
But I found that it's very difficult to copy-and-paste the node's label. Take the above link as an example, I can't drag the text to select any sequence. I can only double-click the label to select a certain char sequence.
If I try to select the text with a special char like Mlle.Vaubois, I can only get Mlle or Vaubois selected, I cannot get the whole string Mlle.Vaubois selected. (See the below picture)
Moreover, I can't select arbitrary char sequence inside that string. For example, I can't select the middle two letters: ll inside Mlle.Vaubois. The highlighting stopped right after the first l is selected. (See below:)
I just want to be able to select any sequence as I want, like in a browser. For example, I can select rce La from the HTML text: Labeled Force Layout as below. Then I can Ctrl + C and Ctrl + V as I wish.
This issue is not just for d3.js, because another more general SVG example also has this issue: http://jsfiddle.net/wPYvS/
I don't know why SVG handles text selection so different with normal HTML text in a browser or any mainstream text editor? How to solve it? Thanks.
The following example adds a click handler to all the "nodes" (ie. class="node"), which will select all the text in the node.
var nodes = document.querySelectorAll(".node");
nodes.forEach( function(elem) {
elem.addEventListener("click", nodeClickHandler);
});
function nodeClickHandler(evt) {
var selection = document.getSelection();
var range = selection.getRangeAt(0);
range.selectNode(evt.target);
}
<svg width="500" height="200">
<g class="node" transform="translate(275.4819543667187,131.9805407488932)">
<image xlink:href="https://github.com/favicon.ico" x="-8" y="-8" width="16" height="16"> </image>
<text dx="12" dy=".35em">Mlle.Vaubois</text>
</g>
</svg>
Within a series of check boxes (lets say 3 options) I am looking to target a specific input element on the checking/unchecking of the associated label.
HAML
.choice-select-button
= check_box_tag("order[recipes][]", recipe.id, selected)
= label_tag do
= t(".step_4.tick_box_to_select")
Renders HTML
<div class="choice-select-button">
<input type="checkbox" name="order[recipes][]" id="order_recipes_" value="6" checked="checked">
<label>Click to select</label>
</div>
Each <input> is assigned same id, namely id="order_recipes_" so if I give set <label for="order_recipes_"> and the user then 'un-checks' the label then only the first input on the page with the id="order_recipes_" is styled according to my css instructions.
The only differentiator I can see for the choice-select-button.input is it's value. As such I was looking at giving the label a for= that targets inputs with the id="order_recipes_ AND value="6". First up, is this doable, and secondly, is the best way to do something like this or is there a much more simple method?
Thanks in advance.
According to the rrails doc:
check_box_tag(name, value = "1", checked = false, options = {}) Link
Creates a check box form input tag.
Options
:disabled - If set to true, the user will not be able to use this
input.
Any other key creates standard HTML options for the tag.
you can generate different ids like this:
check_box_tag("order[recipes][]", recipe.id, selected, {id: recipe.id})
Here is my code for tabbed bar:
<Alloy>
<Window class="container">
<Label id="label" onClick="doClick">Hello, World</Label>
<TabbedBar id="bb1" platform="ios" backgroundColor="#369" top="50" height="25" width="200">
<!-- The Labels tag sets the TabbedBar.labels property. -->
<Labels>
<!-- Specify text with node text or the title attribute. -->
<!-- Can also specify the enabled, image and width attributes. -->
<Label>One</Label>
<Label>Two</Label>
<Label>Three</Label>
</Labels>
<!-- Place additional views for the TabbedBar here. -->
<Views>
<View backgroundColor='red'>1</View>
<View>2</View>
<View><Label>Does this work!</Label></View>
</Views>
</TabbedBar>
</Window>
</Alloy>
When I click on a tab, how can I make sure that the view corresponds to the button pressed - I know how to do this in titanium but not alloy.
Cheers.
I had the same problem yesterday. I'm sure there must be a better way but I couldn't see anything in the documentation, this was my solution:
var animation = require('alloy/animation');
var previousIndex = $.tabbedBar.getIndex();
$.tabbedBar.addEventListener('click', function(){
var currentIndex = $.tabbedBar.getIndex();
var viewArr = [];
viewArr[0] = $.view1;
viewArr[1] = $.view2;
viewArr[2] = $.view3;
animation.crossFade(viewArr[previousIndex], viewArr[currentIndex], 700)
previousIndex = currentIndex;
});
EDIT:
(In case you don't know, on Android there's a module to give you similar functionality: https://github.com/ricardoalcocer/viewpager but check issue #5 on the original repo as you'll have to incorporate that into any build. On the Android version, you don't need to handle the clicks yourself.)
I am trying to bind a range slider with two text input controls. Ideally, I want change in either range slider, text input or viewModel property to update all these controls visually and in sync. But here is my observation.
Changing range slider values by dragging the thumb, updates the viewModel and input text control values
Editing the text in input field in UI updates the viewModel but the rangeSlider is not updated.
Changing the range property in console eg. viewModel.range[0]=-10, does not update the text input value or range slider.
Changing the range slider value programmatically(slider.value([-7. 10])) does not update viewModel or input text.
Here is the code:
Javascript
<script type="text/javascript">
var viewModel = kendo.observable({
range: [-7, 3]
});
$(document).ready(function() {
var slider = $("#slider").kendoRangeSlider({
min: -10,
max: 10
});
kendo.bind($(".QFContent"), viewModel);
});
</script>
HTML
<div class='QFContent'>
<div class='QFReadout QFLowerBound tab-ctrl-formatted-border-hover'>
<div class='QFReadout QFLowerBound tab-ctrl-formatted-border-hover'>
<span class='readoutText tab-ctrl-formatted-fixedsize'></span>
<input data-bind="value: range[0]" data-value-update="keyup" type='text'></input>
</div>
<div class='QFReadout QFUpperBound tab-ctrl-formatted-border-hover'>
<span class='readoutText tab-ctrl-formatted-fixedsize'></span>
<input data-bind="value: range[1]" data-value-update="keyup" type='text'></input>
</div>
<div id="slider" class='QFSlider QFBar' data-bind="value : range">
<input></input>
<input></input>
</div>
</div>
You have to do a bit more work with updating the range as I don't think binding the value to an array[0]/[1] will actually update it.
You will need to call a function that will update the range values when the input box changes. I went ahead and used kendo numerictextboxes, but a regular input box works just as well.
http://jsbin.com/eBOJeceN/2/edit
-- Edit, small bug in that sample, "undefined" isn't undefined. Updated jsbin http://jsbin.com/eBOJeceN/4/edit
I'm new in Windows phone 8 development and I have problem to add button on MapLayer.
I'd like to display a button over a map so I just draw it on the map widget like this:
<Grid x:Name="MyMapGrid" Margin="10,-15,15,0" VerticalAlignment="Top" Height="296" >
<maps:Map x:Name="MyMapi" Center="31.765537,35.106812" ZoomLevel="7" Margin="0,0,0,0" VerticalAlignment="Top" Height="296" Width="442" />
<Button x:Name="myCustomButton" Visibility="Visible" Content="" HorizontalAlignment="Left" Margin="347,0,0,0" VerticalAlignment="Top" Width="84" Height="84" BorderThickness="0">
<Button.Background>
<ImageBrush ImageSource="/myZoom.png"/>
</Button.Background>
</Button>
</Grid>
After this action I need to put some icons on the map so I used MapOverlay and MapLayer like this:
Map MyMap = new Map();
MapOverlay overlay = new MapOverlay
{
GeoCoordinate = MyMap.Center,
Content = new Image()
{
Source = new BitmapImage(new Uri("customIcon.png", UriKind.Relative)),
}
};
MapLayer layer = new MapLayer();
layer.Add(overlay);
MyMap.Layers.Add(layer);
MyMapGrid.Children.Add(MyMap);
I also need my button (myCustomButton) will stay visible - but it disappear.
how can I still have some button over the map and also view some icons on it?
Thank you all!
For button Change the path to definite like ImageSource="/Assets/Icon/location.png" with the folder name and make sure that BuildAction is set to content for that image
For icon also try the same.