Show SharePoint document library / List in provider hosted addin - javascript

I want to show a specific folder from a SharePoint document library in my App. I would like to show them, with all SharePoint functionalities (like open in Word, delete, checkout etc.)
I would like to do that similar to MS Teams - there's the e.g. the general folder shown inside of teams. (And in my eyes it is not a frame)
My Question:
Is there any framework (Javascript or c#) or code sample to do this, like in teams?
I know, how to rebuild it with e.g. a gridview and CSOM.
A link to the library/folder does not help, then the user leave the app context.

Related

Add Custom Tab in office 365 web Word project

I am trying add a custom tab in office 365 Word in the ribbon. There are countless examples of how to do this in VSTO that I can find, but no code example of this in Office 365 AddIn web project.
Closest thing I found is this documentation below. This is also lacking any proper coding sample. Also, this was writting in July 2022.
https://learn.microsoft.com/en-us/javascript/api/manifest/customtab?view=powerpoint-js-preview
From this link below, I can tell that adding a tab is allowed in Office 365, but the coding samples are from 6 to 7 years ago.
https://github.com/OfficeDev/Office-Add-in-Commands
There is also this video tutorial and similar ones like this - but this doesn't show adding new tab.
https://www.youtube.com/watch?v=ZWw-fJ7eldU
There are samples that show how to make Task Pane project. But not for add a custom tab in the ribbon and then add a menu inside it.
Am I missing something? Does office 365 web project allow for adding custom tab? If so, can someone point me to a sample coding project or a video tutorial that shows this?
The ribbon UI extensibility features in web add-ins are still limited comparing to Office COM add-ins, but with a time MS adds features such as contextual tabs support, position on the ribbon (preview), enabled/disabled state, integration of built-in controls. Read more about all that features in the Add-in commands for Excel, PowerPoint, and Word article.
There are two types of add-in commands, based on the kind of action that the command triggers.
Task pane commands: The button or menu item opens the add-in's task pane. You add this kind of add-in command with markup in the manifest. The "code behind" the command is provided by Office.
Function commands: The button or menu item runs any arbitrary JavaScript. The code almost always calls APIs in the Office JavaScript Library, but it doesn't have to. This type of add-in typically displays no UI other than the button or menu item itself. Note the following about function commands:
The function that is triggered can call the displayDialogAsync method to show a dialog, which is a good way to display an error, show progress, or prompt for input from the user. If the add-in is configured to use a shared runtime, the function can also call the showAsTaskpane method.
The runtime in which the function command runs is a full browser-based runtime. It can render HTML and call out to the Internet to send or get data.
Use VersionOverrides in your manifest to define add-in commands for Excel, PowerPoint, and Word. Add-in commands provide an easy way to customize the default Office user interface (UI) with specified UI elements that perform actions. See Create add-in commands in your manifest for Excel, PowerPoint, and Word.

Programmatically create js file and edit existing js files

I am working on a React project for a non-profit with the goal to allow them to post articles to viewers on the website. (like Wired.com posts tech articles)
Currently, I am creating a component for each page, then adding that to the React Router route file so it has a URL, then creating a post preview in a few places to link to that new article page (such as on the front page carousel to show recent posts), then finally adding the actual content to the article page (like paragraphs, links, and graphs).
The client now wants to be able to post articles without going thru me, much like a traditional Squarespace/Wordpress site might have setup, but I do not want to backtrack after creating this React site.
I want to try and create something for the client to fit their needs with the current React site. I can imagine how to allow an admin login section that allows the admin to create a post by submitting the title, image URL, and the body text, but two things I am stumped on are how to go about programmatically creating a JS component file (like ArticleName.js) in a specific location in my src directory, and then also editing existing JS files (like adding a route to react router). I would love to get some direction on how to tackle this. Or am I recreating the wheel and is this a use case of when website builders like Wordpress are a better choice?
Yes, you're definitely recreating the wheel and given the use case it's in their best interest to use something that exists already. If you're doing this pro bono and time and cost are not an issue, it'd be a good experience for you and could pad your resume. If any of those things are an issue, take the off the shelf solution, there's a lot to consider that would be difficult for just one person to do quickly and competently.

Dynamically Created SPA using Durandal

For our single page app, instead of having a set of defined views and viewmodels that live on the server as .html and .js files, we need to build a system where the views and viewmodels are created in “real-time.”
This will be an intranet app and we want end-users to be able to define what they see and use in the app as they are using the app. For example, end-user A creates view1, view2, and view3, while end-user B chooses to create view4 and view5, and so forth. These views are then created in the browser session and saved somehow for the user for the next time they use the app.
They can name these views whatever they want (e.g., dashboard 1, plant view 2, etc.), and then they can select one or more “widgets” to be on each view. A “widget” would be a contain set of JavaScript/HTML/CSS code, similar to user controls in the web forms world, and would perform its specific function and be able to be draggable and resizable. Of course, all the widgets that the user has added to each view will be saved for subsequent uses.
So, each time end-user A opens the app, they’ll see their 3 views as tabs across the top (named whatever they named them when the views were configured) and they’ll be able to navigate to the view and see and interact with the widgets they chose on each view.
Our app will sort of be like Trello in which the views can be added, updated, deleted, etc. by the end-user and “widgets” can be added to the views dynamically, moved around, deleted, updated, etc., all in a dynamically created way.
In studying SPAs, the views and viewmodels are developed as actual physical files that live on the production web server and provide the functionality intended to all users. But, our SPA needs to be more dynamic in terms of what views/pages are available.
Can Durandal be used is this sort of scenario? If so, any guidance on how to do build such a thing?
Or, is this not possible with Durandal? If so, what’s a better path for us?
As a last resort, would we need to create some sort of html and JavaScript generator that will output files after the user has selected the configured options?
Or?????
Thanks for your help!
durandal is a framework for aiding in creating single page applications (SPAs). SPAs are essentially just a website that feels like a desktop application.
Your only limitations on what you can create are the limitations of the browser.
Anything you can build that runs in a browser.. can be used in durandal.
You can have multiple spas inside of 1 spa.
You can dynamically download css/html/js if you need too.
There are lots of options on how you can structure you application.
There's nothing stopping you doing this I think.
You can have flexible routing as you define the routes on Durandal start-up so you could use the saved view data to help construct this. But I have a feeling you basically want a shell that other mini applications sit in? Are your views/widgets completely separate to the main application? If so, you might not really need custom routing.
I was working on something similar. I was using iframes to host the applications and the user was able to move them around. I didn't get as far as persisting what the user had laid out though.

Using html+css+javascript or JSP as my presentation layer

I want to build an application which contains a basic menu (with, lets say 10 buttons), each button is a subject in my girlfriend's psychology course. when i click a button, i will be transfer to the specific subject's menu. (so i have 10 sub-menus like this).
In each sub menu, i can press buttons as well, but this time i wil get some sentences which i saved in mySql data base.
I know how to build the most of the server side part using spring (i know how to build the controllers and service layer) hibernate part (i know how to build the domains and DAO layer),
My problem is, that i don't know if i should use html+css+java script in order to build the menus and configure the functionality and communication between the controller and the client, or maybe should i use Jsp+Jstl?
Sorry for my lack of knowledge, i know this is quiet fundamental..
by using jstl tags you can build
like
<c:out value="${name}"/>

What is a global SharePoint file included on all pages that I can easily embed JS?

The issue is that I've written a simple piece of JS that allows for some functionality that must be present on all pages. I've tried including it in /_catalogs/masterpage/default.master and I have found that it is not being called for the search results page.
The basic requirement as three core requirements:
The include must only happen in one place within SharePoint - we cannot track and maintain multiple touch-points in the SharePoint code.
The target file to be modified should exist for both 2007 and 2010 - I need to be able to provide instructions on where to include my code for users on both platforms.
The code can't go in core.js or any other file that can't be modified by users on the hosted platform.
I've tried a number of different resources to figure this out, but I'm not a SharePoint guy, and trying to wrap my head around this architecture is quite daunting.
Try your options from here. On same blog, it is mentioned what was the best approach for SharePoint 2007 as well.
http://weblogs.asp.net/jan/archive/2010/03/01/scriptsrc-referencing-javascript-files-with-sharepoint-2010-custom-actions.aspx
It sounds like you're close. By default a search site will not have the Publishing Feature turned on to use a master page. If you enable the Publishing Feature from the Site Features on the Search site then you can set the masterpage for the Search to be the same as your other sites. That would allow your javascript to be run on the search pages too.
If you cannot change the masterpage setting for the search site then you may need to add your code into both places (optionally referencing one central file from both). But the masterpage is a good central place for code like this. It's just a matter of getting the code in all of the masterpages that are used.
Have you had a look at the free SharePoint Infuser? SP2007 only, but an SP2010 will be released as well.
Basically it allows injecting of any HTML / CSS / JS on all pages in a site collection without modifying them.

Categories