How to make HTML Page that will make cards from .csv file? - javascript

I need to make website that will display information from .csv (or whatever you will advice). That information should look like: every string is individual card.
scheme of design
sample of csv
i tried to search information of DOM and d3js, but doesnt understand how to create every object individually and how to pic only on part of Table

Related

How to do a person search and return back those lines in a select group of spreadsheets in a SharePoint document library

I have a need for a user to type in a name of a user on a SharePoint page and have it only look for all occurrences of this name in a series of spreadsheets stored in a single document library. This should return a series of lines where this person's name found.
A few things.
- The names used in the spreadsheets are not exact matches to those in
SharePoint and in fact will be first last instead of last, First as
in SharePoint. Maybe only accepting last names?
- These spreadsheets do have a property called Deliverable set to RACI.
- The spreadsheet lines look like this: Sponsor,DHS,Krista Willing,A,A,A,R,A,A,A
I have started the design and my first web part is a list filter allowing the user to pick a name. I then want to take the last name of what is selected and do a search in a document library for all the RACI (excel documents with RACI as a property) and display the results. This last part I'm still trying to figure out.
We can implement this using customizing the display template and content search webpart, please refer the below link how to customize the display template :
Content By Search Web Part
Content By Search Web Part(CSWP) was introduced in SharePoint 2013. CSWP has power to display dynamic content from SharePoint search index, based on dynamic search queries. It uses Display Templates for styling and formatting search results on the page. A big advantage of using CSWP over CQWP is, there are no scope boundaries for getting data across sites. However freshness of results depends on the latest crawl on content.
Display Templates 
Display Templates are used with CSWP to format/style search result generated by CSWP search query. Display Templates control which managed property is shown in the search results and how they appear in the Web Part. Each Display Template has two files: an HTML version of the Display Template that you can edit in your HTML editor, and a .js file that is for SharePoint use and should never be modified. CSWP uses combination of two Display Templates, Control Templates and Item Templates to render results.                         
Control Template provides HTML to structure the overall layout for how you want to present the search results.For example, the Control Template might provide the HTML for a heading, beginning and end of a list. The Control Template is rendered only once in the Web Part.
Item Template provides HTML that determines how each item in the result set is displayed. For example, the Item Display Template might provide the HTML for a list item that contains a picture, three lines of text that are mapped to different managed properties associated with the item. The Item Display Template is rendered one time for each item in the result set. So, if the result set contains ten items, the Item Display Template creates its section of HTML ten times. 
https://msdnshared.blob.core.windows.net/media/TNBlogsFS/prod.evol.blogs.technet.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/00/92/84/8233.figure2.jpg
There will be two display templates
Header or control Display template
Item Display template
We need to customize the item display template. Process is - download the default item display template from display template gallery, rename the file name, do the customization, upload back the customized display template, publish it, go to content search web part, from web part setting select the newly updated item display template.
Sample item display template code :
<mso:ManagedPropertyMapping msdt:dt="string">'Picture URL'{Picture URL}:'PublishingImage;PictureURL;PictureThumbnailURL','Link URL'{Link URL}:'Path','Line 1'{Line 1}:'Title','Line 2'{Line 2}:'Description','Line 3'{Line 3}:'','SecondaryFileExtension','ContentTypeId', 'FileExtension'{FileExtension}:'FileExtension
https://blogs.technet.microsoft.com/sharepoint_quick_reads/2013/08/01/sharepoint-2013-customize-display-template-for-content-by-search-web-part-cswp-part-1/

Open website with picture (based on link)

I want to make one website (running on a Raspberry Pi) and based on the link (for example: test.com/01 or test.com/02) the exact website should be opened, but with another picture. I want to avoid a database and I would like to work with pictures. Is it possible always to open the "index.html" website and get the numbers out of the link?
test.com/01 will take you to the 01 file. What you are trying to do is pass in key-value query parameters, and need a Query string like this test.com?picture=01. You can even use the same HTML page and then choose the picture from the query string.
Since you want to avoid DBs, you can send both pictures and then hide the one that is not in the query string.
URLs are kinda complicated, check them out

Is there a way that I can autopopulate my webpage with pictures from another website?

I'm making a simple website (think of it as wikipedia without the text), where the users click links to people's names and then go to that person's personal page. I would like to be able to have an image of the person also show up on the personal page, but I don't want to hard code the links to the images or save them on my computer.
Is there a way that I can get the top search result from Google images and then copy that link to put into each page dynamically?
I would suggest using the google api (Google image search api ), pull a search on page load for the user, parse the json for the "unescapedUrl" and use that as your img src attribute.

Create div when file is created

I'm trying to create a "live" HTML page that updates based upon dynamic data sources.
The data source could be individual files, or could be entries in a database.
My thought is to create a <div> (animated to pop on the screen via jQueryUI) for each data source as it comes online, with its data updating periodically. Then, when the the timestamped data becomes stale, remove the div.
I have some ideas, but want to hear different implementation strategies suggestions on the best way to handle this.
Thanks!

What is the best approach for storing YouTube content appended to user contributed content?

So I'm trying to implement similar functionality to Facebook where I am including information from YouTube should a users post contain a link, and when clicked it embeds the video.
I've accomplished it thus far, I'm just wondering how Facebook stores this information.
To me there are two options:
1) Have the post saved as normal (it is just plain text), and if the post contains a youtube link, append it on the fly in JavaScript whenever that content is viewed. However I know that when you post a link, Facebook gives you the option to change the title, description etc. Which leads me to..
2) Generate the HTML that would be otherwise appended when viewed and store it alongside the post at the database-insert level.
If so, doesnt that add a significant amount of information per post? What happens if you want to change the formatting of all youtube content within posts on your site later on? Each will be stored individually and seems like it would be a pain.
What is the best way to manage & engineer this sort of functionality?
Cheers,
I'd store the information itself in the database, but not as HTML. Generate the HTML on the fly but store the data in a separate place. If you don't want to add too many extra database fields consider storing the information in some serialized form (like serialize() in PHP).
Anyway I would always keep information separated and never store auto-generated HTML unless it's some sort of cache that can be re-generated.
If you want the user to include his video within his text, store the link in HTML within that user's intervention, and output it as is from the database on the page. Then your users can edit their posts to decide whether to place the video before, after, in the middle or not at all, and can change the details in HTML.
If you are showing the video in some standard way, then store the video link along with the post in a separate database column, and generate the HTML on the fly. You can have data in columns for size, colour etc..., but the flexibility will always be limited to what you decide to store: if there is a database coloumn for colour then you are letting the user choose the colour, otherwise... not.
So, the most flexible is to let your users type HTML. If you think they aren't up to it, or you want to limit their choices of what they can format, you could use a java(script) rich text editor of the type that you have in stackoverflow, wikipedia etc., with possibilities to edit text in certain chosen ways via buttons. You could also store the post in XML, say in a chosen subset of HTML5 (anything that is valid in a certain container...), and transform it at presentation time.
to me this sounds like a problem that was taken too far.
if you implement ckeditor in your post form,
it should resolve the problem ( if i understood it right ),
since in ckeditor you can embed an swf/flv,
and the output will be html.
that gives the editor the power to decide exactly where he want the video ( since he can add the link wherever he wants in the form ).
since the flv/swf come with its meta data from youtube, you dont need to save that data,
just the link to the video.

Categories

Resources