Passing JSON data on click event

How-to Discussions
1

Hi!

I want to pass JSON data on a click event. I’ve read up everything I can find about it, but I don’t understand it nor make it work.
This is what I want: when the user clicks on one of the images, the panel named “NewsDetails” will show up together with the title that are connected to that result.

Can someone explain to me how I output that in ux markup from javascript?

<Page>
<JavaScript File="NewsPage.js" />

<Panel ux:Name="NewsFeed" Opacity="1">
  <ScrollView>
    <StackPanel>
<ScrollView>
    <StackPanel>

      <!-- Outputing newfeed from JSON -->
      <Each Items="{dataSource}">      <Each Items="{dataSource}">
        <Image Width="100%" Height="100%" Url="{image}" ZOffset="0.0">
          <Clicked>
            <Toggle Target="opacityNews" />
            <Callback Handler="{articleClicked}"/>
          </Clicked>
          <Panel Alignment="BottomLeft" Margin="20">
            <Text Value="{title}" Font="TitleFont" TextColor="#fff" TextWrapping="Wrap" FontSize="20" LineSpacing="10" />
          </Panel>
        </Image>

      </Each>
    </StackPanel>
  </ScrollView>
</Panel>

<WhileTrue ux:Name="opacityNews">
    <Change NewsDetails.Opacity="1" Duration="0.1" />
    <Change NewsFeed.Opacity="0" />
    <Change BackgroundImage.Opacity="0" />
</WhileTrue>

<!-- Output newsfeed details -->
<Panel ux:Name="NewsDetails" Opacity="0" >
  <Rectangle Width="100%" Height="100%"  Background="White" ZOffset="1.0">
    <Each Items="{articleClicked}">
      <Text Value="{title}" Alignment="Center" />
    </Each>
  </Rectangle>
</Panel>
</Page>


var Observable = require("FuseJS/Observable");
var data = Observable();

function Article(item) {
    this.title = item.title;
    this.image = item.image.url;
    this.text = item.text;
};

function articleClicked(args) {
    console.log(args.data.title);
};

fetch("https://dev.jexpo.se/dev/forms/news?getAttributes=1")
.then(function(response) { return response.json(); })
.then(function(responseObject) {
    var items = [];
    responseObject.results.forEach(function(r) {
        items.push(new Article(r));
    });
    data.replaceAll(items);
    debug_log("data: " + JSON.stringify(data));
}).catch(function(e) {
    console.log("Error: " + e.message);
});

module.exports = {
    dataSource: data,
    articleClicked: articleClicked
};
2

You only need to add another variable that holds the data of the currently selected item. Here, I called it selectedArticle, setting its value from your articleClicked() function, and using it in UX as <With Data="{selectedArticle}">:

<App>
	<JavaScript>
	var Observable = require("FuseJS/Observable");
	var data = Observable();

	function Article(item) {
		this.title = item.title;
		this.image = item.image.url;
		this.text = item.text;
	};

	var selectedArticle = Observable();

	function articleClicked(args) {
		console.log(JSON.stringify(args.data));
		selectedArticle.value = args.data;
	};

	fetch("https://dev.jexpo.se/dev/forms/news?getAttributes=1")
	.then(function(response) { return response.json(); })
	.then(function(responseObject) {
		var items = [];
		responseObject.results.forEach(function(r) {
			items.push(new Article(r));
		});
		data.replaceAll(items);
		debug_log("data: " + JSON.stringify(data));
	}).catch(function(e) {
		console.log("Error: " + e.message);
	});

	module.exports = {
		dataSource: data,
		articleClicked: articleClicked,
		selectedArticle: selectedArticle
	};
	</JavaScript>

	<Panel ux:Name="NewsFeed" Opacity="1">
	<ScrollView>
		<StackPanel>
			<Each Items="{dataSource}">
				<Image Width="100%" Height="100%" Url="{image}" ZOffset="0.0">
					<Clicked>
						<Toggle Target="opacityNews" />
						<Callback Handler="{articleClicked}"/>
					</Clicked>
					<Panel Alignment="BottomLeft" Margin="20">
						<Text Value="{title}" Font="Bold" TextColor="#fff" TextWrapping="Wrap" FontSize="20" LineSpacing="10" />
					</Panel>
				</Image>
			</Each>
		</StackPanel>
	  </ScrollView>
	</Panel>

	<WhileTrue ux:Name="opacityNews">
		<Change NewsDetails.Opacity="1" Duration="0.1" />
		<Change NewsFeed.Opacity="0" />
	</WhileTrue>

	<Panel ux:Name="NewsDetails" Opacity="0" >
	  <Rectangle Width="100%" Height="100%"  Background="White" ZOffset="1.0">
		<With Data="{selectedArticle}">
		  <Text Value="{title}" Alignment="Center" />
		</With>
	  </Rectangle>
	</Panel>
</App>
3

Thank you so much Uldis! Worked perfect!

4

I would like to understand in general how the “With” tag works. Is there any documentation I can look for in its definition?

Uldis wrote:

You only need to add another variable that holds the data of the currently selected item. Here, I called it selectedArticle, setting its value from your articleClicked() function, and using it in UX as <With Data="{selectedArticle}">:

<App>
	<JavaScript>
	var Observable = require("FuseJS/Observable");
	var data = Observable();

	function Article(item) {
		this.title = item.title;
		this.image = item.image.url;
		this.text = item.text;
	};

	var selectedArticle = Observable();

	function articleClicked(args) {
		console.log(JSON.stringify(args.data));
		selectedArticle.value = args.data;
	};

	fetch("https://dev.jexpo.se/dev/forms/news?getAttributes=1")
	.then(function(response) { return response.json(); })
	.then(function(responseObject) {
		var items = [];
		responseObject.results.forEach(function(r) {
			items.push(new Article(r));
		});
		data.replaceAll(items);
		debug_log("data: " + JSON.stringify(data));
	}).catch(function(e) {
		console.log("Error: " + e.message);
	});

	module.exports = {
		dataSource: data,
		articleClicked: articleClicked,
		selectedArticle: selectedArticle
	};
	</JavaScript>

	<Panel ux:Name="NewsFeed" Opacity="1">
	<ScrollView>
		<StackPanel>
			<Each Items="{dataSource}">
				<Image Width="100%" Height="100%" Url="{image}" ZOffset="0.0">
					<Clicked>
						<Toggle Target="opacityNews" />
						<Callback Handler="{articleClicked}"/>
					</Clicked>
					<Panel Alignment="BottomLeft" Margin="20">
						<Text Value="{title}" Font="Bold" TextColor="#fff" TextWrapping="Wrap" FontSize="20" LineSpacing="10" />
					</Panel>
				</Image>
			</Each>
		</StackPanel>
	  </ScrollView>
	</Panel>

	<WhileTrue ux:Name="opacityNews">
		<Change NewsDetails.Opacity="1" Duration="0.1" />
		<Change NewsFeed.Opacity="0" />
	</WhileTrue>

	<Panel ux:Name="NewsDetails" Opacity="0" >
	  <Rectangle Width="100%" Height="100%"  Background="White" ZOffset="1.0">
		<With Data="{selectedArticle}">
		  <Text Value="{title}" Alignment="Center" />
		</With>
	  </Rectangle>
	</Panel>
</App>
5

Of course there is: https://www.fusetools.com/docs/fuse/reactive/with