How to link the title of a post to the detail page in fuse

General
1

The code below pulled data from cnn website but I want to know how to link the title field to the detail page WITHIN the fuse app. Please someone should help

<App Background="#ECEFF1">

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

		var data = Observable();

		function Article(articles) {
			this.title = articles.title;
			this.description = articles.description;
			this.author = articles.author;
			this.published = new Date(articles.publishedAt * 1000).toDateString();
			this.image = articles.urlToImage;
			};

		fetch("https://newsapi.org/v1/articles?source=cnn&sortBy=top&apiKey=8358ffecbf254b418d37bc9e4ffb507b")
		.then(function(response) { return response.json(); })
		.then(function(responseObject) {
			var items = [];
			for (var i in responseObject.articles) {
				items.push(new Article(responseObject.articles[i]));
			}
			data.replaceAll(items);
		});

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

	<Panel ux:Class="NewsItem">
		<StackPanel ItemSpacing="10" Margin="15">
			<Text Value="{title}" TextWrapping="Wrap" FontSize="20" />
			<DockPanel>
				<Text Value="{description}" TextWrapping="Wrap" FontSize="13" />
				<WhileString Value="{image}" Test="IsNotEmpty">
					<Panel Dock="Left">
						<Image Url="{image}" Width="80" Margin="0,0,10,0" Alignment="TopLeft" />
					</Panel>
				</WhileString>
			</DockPanel>
			<DockPanel>
				<Text Value="{published}" FontSize="10" Color="#999" Dock="Left" />
				<WhileString Value="{author}" Test="IsNotEmpty">
			 		<Text Value="by {author}" FontSize="10" Color="#999" Dock="Right" />
			 	</WhileString>
			</DockPanel>
		</StackPanel>
		<Rectangle Color="#FFF" />
	</Panel>

	<ClientPanel>
		<Panel Dock="Top" Height="46">
			<Text Value="NEWS" Color="#ECEFF1" FontSize="28" Alignment="Center" />
			<Rectangle Color="#37474F" />
			<Shadow />
		</Panel>
		<ScrollView>
			<StackPanel ItemSpacing="1">
				<Each Items="{dataSource}">
					<NewsItem />
				</Each>
			</StackPanel>
		</ScrollView>
	</ClientPanel>
</App>
2

You’re asking about a “details page”, but in your code there isn’t one. Would you mind explaining what it is that you are trying to do, and what is the problem?

If you’re willing to introduce navigation in this app, you should take a look at the Tutorial.

3

Thanks Uldis for your reply.

Below is the JSON data source for code i mentioned earlier. As you can see the detail page is the “url” to the full content on the JSON generated. My question is how do I link the title to the detail page without leaving the app? I don’t want to be directed to open the url on a browser, but want the link open inside the app itself. I hope my question is clear.

{
    "status": "ok",
    "source": "cnn",
    "sortBy": "top",
    "articles": [
        {
            "author": "Faith Karimi and Catherine Shoichet, CNN",
            "title": "Hurricane Irma pushing north with wind, rain",
            "description": "Editor's note: This is a developing story that is being constantly updated as the storm progresses. Also, follow our live updates here or watch unlimited CNN.",
            "url": "http://www.cnn.com/2017/09/11/us/hurricane-irma-weakens-to-category-1-storm/index.html",
            "urlToImage": "http://i2.cdn.cnn.com/cnnnext/dam/assets/170910152852-42-irma-florida-0910-super-tease.jpg",
            "publishedAt": "2017-09-11T09:42:00Z"
        },
        {
            "author": "Lauren Said-Moorhouse, CNN",
            "title": "Hurricane Irma: Live updates",
            "description": "Hurricane Irma is headed for Florida after wreaking havoc on the Caribbean. Follow live coverage of Irma's path, destruction and forecast here.",
            "url": "http://www.cnn.com/2017/09/09/us/hurricane-irma-florida-latest/index.html",
            "urlToImage": "http://i2.cdn.cnn.com/cnnnext/dam/assets/170910152852-42-irma-florida-0910-super-tease.jpg",
            "publishedAt": "2017-09-11T09:26:38Z"
        },
        {
            "author": "Ray Sanchez, CNN",
            "title": "Shorelines drained in eerie effect of Hurricane Irma",
            "description": "Hurricane Irma's extraordinary strength has caused a seemingly unusual meteorological phenomena: the eerie pushing of water away from shorelines in the Bahamas and the Gulf Coast of Florida.",
            "url": "http://www.cnn.com/2017/09/10/us/shorelines-drained-hurricane-irma-storm-surge/index.html",
            "urlToImage": "http://i2.cdn.cnn.com/cnnnext/dam/assets/170910151610-cnnee-vo-irma-dejan-las-playas-de-algunas-de-sus-zonas-completamente-secas-florida-tampa-00000000-super-tease.jpg",
            "publishedAt": "2017-09-11T02:50:48Z"
        },
        {
            "author": null,
            "title": "Weir: This has shaken me unlike anything - CNN Video",
            "description": "CNN's Bill Weir follows the aftermath of Hurricane Irma in the Florida Keys and takes us to what's left of the popular local restaurant and bar Snappers in Key Largo, Florida.",
            "url": "http://www.cnn.com/videos/us/2017/09/10/bill-weir-key-largo-restaurant-snappers-gone-ac-sot.cnn",
            "urlToImage": "http://i2.cdn.cnn.com/cnnnext/dam/assets/170910193955-snappers-after-irma-bill-weir-super-tease.jpg",
            "publishedAt": null
        },
        {
            "author": "Elizabeth Cohen and Debra Goldschmidt, CNN",
            "title": "Irma first responders have to ignore 911 calls",
            "description": "When the winds kicked up as Hurricane Irma made its way up Florida's west coast, rescue workers watched helplessly as the 911 calls piled up on a computer screen.",
            "url": "http://www.cnn.com/2017/09/11/health/first-responders-frustrated-during-irma/index.html",
            "urlToImage": "http://i2.cdn.cnn.com/cnnnext/dam/assets/170910221839-48-irma-florida-0910-super-tease.jpg",
            "publishedAt": "2017-09-11T06:43:40Z"
        },
        {
            "author": null,
            "title": "See Hurricane Irma's wrath hit Florida - CNN Video",
            "description": "Video shows Hurricane Irma, a category 4 storm with sustained winds of 130 mph, wreak havoc on Florida.",
            "url": "http://www.cnn.com/videos/us/2017/09/10/hurricane-irmas-wrath-on-florida-tc-orig.cnn",
            "urlToImage": "http://i2.cdn.cnn.com/cnnnext/dam/assets/170910074703-irma-super-tease.jpg",
            "publishedAt": null
        },
        {
            "author": "Christina Zdanowicz, CNN",
            "title": "'I'm not leaving': Floridians share their Irma stories",
            "description": "Floridians in the path of Hurricane Irma have sent us more than 1,000 messages since the storm began barreling up the state's Gulf coast. Here are some of the best.",
            "url": "http://www.cnn.com/2017/09/10/us/hurricane-irma-text-whatsapp-messages-trnd/index.html",
            "urlToImage": "http://i2.cdn.cnn.com/cnnnext/dam/assets/170910140750-irma-go-away-gina-fischer-super-tease.jpg",
            "publishedAt": "2017-09-11T02:25:54Z"
        },
        {
            "author": "Brandon Miller, CNN\nDesign: Paul Martucci, CNN",
            "title": "All the records Irma has already broken",
            "description": "There hasn't been a storm like Irma to hit the US. Ever. Here are some numbers that put the hurricane's fury into perspective.",
            "url": "http://www.cnn.com/2017/09/10/us/irma-facts-record-numbers-trnd/index.html",
            "urlToImage": "http://i2.cdn.cnn.com/cnnnext/dam/assets/170910131551-30-irma-florida-0910-super-tease.jpg",
            "publishedAt": "2017-09-10T18:45:32Z"
        },
        {
            "author": null,
            "title": "Tracking the path of Hurricane Irma",
            "description": "",
            "url": "http://www.cnn.com/interactive/storm-tracker/",
            "urlToImage": "http://i.cdn.turner.com/cnn/interactive/weather/hurricane.tracker/watching/Close_Satellite.jpg",
            "publishedAt": null
        },
        {
            "author": null,
            "title": "Sidner: It's getting too hard to stand - CNN Video",
            "description": "Winds in Daytona, Florida, got so bad that CNN's Sara Sidner had to duck behind a wall.",
            "url": "http://www.cnn.com/videos/weather/2017/09/11/irma-daytona-strong-winds-sidner-live.cnn",
            "urlToImage": "http://i2.cdn.cnn.com/cnnnext/dam/assets/170911030116-sara-sidner-hurricane-irma-super-tease.jpg",
            "publishedAt": null
        }
    ]
}
4

If you want to open a particular URL inside of a Fuse application, and do so on another page, then you need to:

  1. learn how to do Navigation (e.g., use a Navigator with templates in UX and router.push() in JavaScript);
  2. Use a WebView on the other page.