JSON items to have pages of their own - javascript

I've started using contentful, created a few entries and now I want to make a simple dynamic page with subpages.
Basically, a portfolio. What i want to have there - index page with links to inner portfolio pages. I've got a JSON with entries each of them containing title, content, slug, id, etc.
How do i make them have each of their page with url? Template is going to be the same. So for example the user comes to url.com/someurl and he sees the page for some specific item in entries.
My gut is telling me that usually controller does this kind of job. Should i try using some frameworks like angularjs?

You can have a look at this simple example app I've been working on, using just plain JS. It's not entirely finished but showcases the very basic principles of using Contentful to build a frontend only app with the contentful.js SDK: https://github.com/contentful/product-catalogue-js
Give that you added an angularjs tag I'm assuming you could also be interested in this: https://github.com/jvandemo/angular-contentful
Essentially you should just build an app as any other, using whatever framework (or not) you want, but get the data from Contentful instead of an AJAX endpoint or any other data library.
What you might want to think of as well is how you structure your Entries and Content Types in Contentful. A good strategy is to have some kind of Entry that corresponds to a page (for instance, in that example app there are Products and there are individual pages for each Product), and then have related Entries you can link to it (like say, Blog Posts and Images).

Related

Rendering Teams channel messages as cards

I am developing a frontend application using Angular that should show conversations in Teams channels. Currently I'm a little bit lost when it comes to showing chat messages. I understand that Teams makes use of AdaptiveCards to display different types of messages, like 'vnd.microsoft.card.thumbnail', and that one should use AdaptiveCards for rendering cards to HTML instead of doing all of the work to manually create all sorts of HTML templates.
But this is exactly what I am failing at :(
This basic example works just fine: https://learn.microsoft.com/de-de/adaptive-cards/sdk/rendering-cards/javascript/render-a-card
But as soon as I am trying to render a card with the data I receive from the Microsoft Graph API ('/teams/{tid}/channels/{cid}/messages'), it just shows nothing. It seems as if the data doesn't fit together. For example, AdaptiveCards have a property called 'actions' whereas Graph's chatMessage objects have 'buttons'.
What am I missing?
Thanks a lot,
Bruno
I don't think you can attain what you want using adaptive cards. As I understand, you want the JSON result from the Microsoft Graph API ('/teams/{tid}/channels/{cid}/messages') to be rendered as Adaptive Card without any processing. This will not happen. You should parse the data and then mapp it to the adaptive card JSON values.

Is it possible to create a subpage without any file?

I'm a newbie when it comes to PHP. I wrote some JS to make AJAX requests for my project and it worked well, but I don't have any idea how to convert that into PHP.
I've prepared layouts like the following:
mainLayout.php,
userLayout.php,
offerLayout.php,
In those files are some PHP and MySQL parts that build an HTML page.
In Ajax it was easy to navigate between many users using only one page and replacing some divs with data...
But a huge minus was that you couldn't have a single address reference a user profile or the offer (like mywebsite.com/user1).
Now, when I use PHP I want to achieve same layout effect.
How can I avoid creating a thousands of pages (of course even dynamically it seems to be a waste of memory IMO) like user1.php, user2.php, offer1.php, etc.
I don't know how to achieve the effect of being on a site like example.com/user277373.php without creating thousands of files but only one template.
Two solutions I see is either you use GET to parse your data:
http://example.com/?data=1736861
and than access it over the $_GET variable:
$id = $_GET["data"];
($id will be 1736861)
or you use the flight php extension, that will look something like this:
Flight::route('/id/#id', function($id){
echo "ID: $id";
});
and the URL would look like http://example.com/id/1736861. You can also use multiple variables with the flight module.
I hope this helped, Sebastian
Are you familiar with any MVC frameworks? If not, I would highly recommend getting accustomed to the MVC design paradigm. MVC = Model View Controller. From Wikipedia, a short excerpt:
A model stores data that is retrieved according to commands from the controller and displayed in the view.
A view generates new output to the user based on changes in the model.
A controller can send commands to the model to update the model's state (e.g., editing a document). It can also send commands to its
associated view to change the view's presentation of the model (e.g.,
scrolling through a document).
Two of the key components of MANY frameworks (in pretty much any language), are Routes and Templates. When utilizing a routing system, you're able to specify a template for every page loaded that matches a specific route. For instance, site.com/people/:id where ':id' can be any value in the URL, and be configured to use "person.html" for the HTML output. Note that "person.html" receives variables/data that will dynamically populate content, e.g. <h2>Hello, {{name}}</h2>
So, to clarify, site.com/people/252, site.com/people/12, site.com/people/5, site.com/people/john would all match the site.com/people/:id route path where :id is dynamic, and your system will use ONE TEMPLATE (which you specify) to display all the data. Don't forget, when that route path is met, that's only step 1. You will probably need to take that :id run some database query and pass that data into the template.
A popular micro PHP framework called Slim, might be a good starting point. Here's documentation for its way of handling Routes and Templates:
https://www.slimframework.com/docs/objects/router.html
https://www.slimframework.com/docs/features/templates.html
Slim is commonly used with Twig, a super popular PHP template engine. Here's its website/documentation: http://twig.sensiolabs.org/
And if that wasn't enough, Slim has a super handy First App Walkthrough that will show you routes, database connection, and templates: https://www.slimframework.com/docs/tutorial/first-app.html
Hope this information helps you on your journey – Best of luck!

Generate an HTML table from a Word Document

I'm putting together a simple website for our department. I'd like to include one of the references that we use often on the main page, a word document that contains a priority list for outstanding work. This document is generated by another department and located on a shared drive. The info is not in a table, but uses a fairly consisten format for displaying info.
Ex: (the info is actually formatted like this)
--------------
Item Title
--------------
Tracker#: 12345-0012 Due; 01/01/12
Description...
My ultimate goal is to have a table on the main page that contains the various items in the priority list. I would like a mechanism that automatically checks the word docs about once an hour, parses the document, generates a table from the info in the doc, and updates the main page accordingly.
I've never done anything like this and have no idea where to start or if what I'm asking is even possible. I'm not in IT and do not have the ability to use ASP or PHP at the moment. So I'd like to avoid server-side scripting if possible, but I may be able to work something out if absolutely necessary.
Thanks
I know how to do this in java.. you can use the docx4j library.. Without that it would be difficult. Can't the team that create the doc store the file as a flat file as well maybe?
One possible solution is to save document as html (using automation - create Word.Application object, call Open, SaveAs) and serve it directly or inside frame.

Web Link Buttons with Variable URLs in InDesign

My work assignment of late has been developing an interactive PDF catalog of our products that my superior can distribute digitally and let potential customers browse without accessing the website.
We have an Excel file that lists all the details of our products - name, description, title, image, category, etc. I have used Data Merge to create this 300 page document rather than hand-copy each product's information to a single page.
Unfortunately I am now stuck - I have designed the catalog in such a way that I have an image that I want to make a button which, if the person wishes to purchase a product, will take them directly the the product page online where he or she can add it to the shopping cart. This is great, but I cannot seem to find a way to make the image button's link a variable as the rest of the page content. Links to each product page are included in the CSV file, but without a variable web link method, I would have to create the unique links individually, which kinda defeats the purpose of using Data Merge anyway.
So my question is this - is there any way to make a URL button (an image) have a web link function that can read from a CSV file and change each page like other imported content? I've asked in the Adobe Forums and the one answer I received was for using JavaScript, so I came here. If not, is there another way to automate the individual link process without setting it up on each generated page?
Thanks in advance,
Asher
I didn't test it, but I think you first have to define HyperlinkPageItemSources with the add()-method. This method accepts an image-object, because it is an pageItem. (http://jongware.mit.edu/idcs4js/pc_HyperlinkPageItemSources.html)
Then define HyperlinkURLDestinations with add()-method. The method accepts a URL as string. (http://jongware.mit.edu/idcs4js/pc_HyperlinkURLDestinations.html)
Define Hyperlinks with add()-method. First argument is a hyperlinkSource – for this case a HyperlinkPageItemSource – and second is a hyperlinkDestination – for this case a HyperlinkURLDestination. (http://jongware.mit.edu/idcs4js/pc_Hyperlinks.html)
For reading a csv-file and bringing to an array look here for example (function parseCSV()…): http://forums.adobe.com/message/3404908#3404908
Hope that helps a bit!

Including Information in HTML for Javascript to Consume?

I'm am building a web app with app engine (java) and GWT, although I think my problem is moreso a general javascript question.
In my application, I want to include a side-menu which is generated from data in my database. This obviously needs to be done dynamically from a servlet.
Currently, I am sending a blank menu container, then making an ajax call to get the information i need to populate the menu. I would rather just send the menu information along in the original request, so I do not need to waste time making a second request. I used this initial approach because it seemed simpler: I just wrote a gwt rpc service that grabbed the data i needed.
My question is, can I instruct a javascript library like gwt to look for its information in the current web page? Do I have to hide this information in my original HTML response, maybe in a hidden div or something?
If the data that you'd like to embed is restricted to menu items, why not directly generate lightweight HTML out of simple <ol> and <li> elements? You can still keep HTML out of your Java code by using a template engine. The menu markup could just be styled with CSS or if you need something fancier than mere <ol> and <li> elements, you can massage the DOM with JavaScript once the page loads (read: progressive enhancement).
If you're looking for a more generic solution, beyond the menu case, then you could embed a JSON block in your page, to be consumed when the page loads for the dynamic generation of your menu.
Or, you could look into using a microformat that is suitable for menu data.
You can include a script block in the original response defining the data and then use an onload event (or similar) to create the menu based on that data; that's very similar to what you're doing now, but without the extra trip to the server. I'm assuming there that the data to construct the menu is transformed in some way by JavaScript on the client; otherwise, just include the menu markup directly.
GWT has something called JSNI (Javascript Native Interface) that can interface with other non-GWT Javascript. So, you could in your HTML page container have a containing the generated menu items as a Javascript object. Then, in your GWT code, you have a JSNI call to fetch this data and put it in the right place in your UI/DOM with GWT methods.
I asked a similar question a few weeks ago about how to store data safely inside HTML tags. It also contains a few links to other questions. Here
There are in general 2 options:
Store the data in some xml tags somewhere in the html code and later get the information from there by traversing through the DOM. (you can hide them with css)
Store the data as JSON data in a script tag. (There en- and decoders for nearly every language)
var data = { "foo" : "bar", "my_array":[] };

Categories

Resources