I've created a completely custom homepage in Sharepoint 2013 and it works fine (using custom HTML, CSS, JS, and Jquery Lib). I just need to know how to add the Sharepoint Suitebar to the top of the custom page.
I'm not using any type of Sharepoint template or master page template. I built my page like you would any other web page and uploaded my files into a directory within Sharepoint and then uploaded my custom page to the Site Pages directory and set it as home.aspx, which automatically makes it my homepage. Building a completely custom page like this is great, but I loose some built in features and components Sharepoint offers which I would like to use, the Suitebar being one of them.
My example HTML template here does not represent my actual custom homepage. I'm just linking this JSfiddle in hopes that someone will show me how/where to add in the Sharepoint Suitbar.
JSFiddle:
https://jsfiddle.net/x1vcdeLx/
<!DOCTYPE html>
<html>
<head>
<title>Sharepoint Custom Homepage</title>
<!-- Stylesheets -->
<link href="/sites/SiteAssets/css/reset.css">
<link href="/sites/SiteAssets/css/style.css">
</head>
<body>
<!-- BEGIN CREATIVE CONTENT -->
<div class="myContent">
<div class="row-1-of-3"></div>
<div class="row-2-of-3"></div>
<div class="row-3-of-3"></div>
</div>
<!-- END CREATIVE CONTENT -->
<!-- Scripts -->
<script src="/sites/SiteAssets/js/jquery-2.1.4.min.js"></script>
<script src="/sites/SiteAssets/js/jquery-easing-1.3.min.js"></script>
<script src="/sites/SiteAssets/js/script.js"></script>
</body>
</html>
You can go and download the Sharepoint master page then search for the controls which are used for that suite bar. Put those controls in your page and it may display properly.
To get the name of the portion of the suite bar see image below
Related
I want to embedded Tableau dashboard result into one of the html pages in Django. Can it be done?
Thank you for any advice!
there are several methods, however i am writing the one which i am using.
Tableau Embed Code
Step 1 : On your Tableau Server / Tableau Online, go to the content you want to embed and click the 'Share' button.
Step 2 : Click the "</> Embed Code" link and copy it
.
Step 3 : paste embedded code between below html body tag.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Embedded Analytics with Tableau Online</title>
</head>
<body>
<!-- copy Embedded code here-->
</body>
</html>
Finally, Save the file and refresh your browser
This is my index page in django
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/3.8.95/css/materialdesignicons.css">
<meta charset="UTF-8">
<title>My test</title>
</head>
<body>
<div id="app">
<h1>TEST</h1>
</div>
{% render_bundle 'main' %}
</body>
</html>
And this is a standard Vue navbar.
<template>
<v-app id="sandbox">
<v-navigation-drawer
v-model="primaryDrawer.model"
:clipped="primaryDrawer.clipped"
:floating="primaryDrawer.floating"
:mini-variant="primaryDrawer.mini"
:permanent="primaryDrawer.type === 'permanent'"
:temporary="primaryDrawer.type === 'temporary'"
app
overflow
><v-switch
v-model="$vuetify.theme.dark"
primary
label="Dark"
></v-switch></v-navigation-drawer>
<v-app-bar
:clipped-left="primaryDrawer.clipped"
app
>
<v-app-bar-nav-icon
v-if="primaryDrawer.type !== 'permanent'"
#click.stop="primaryDrawer.model = !primaryDrawer.model"
></v-app-bar-nav-icon>
<v-toolbar-title>Vuetify</v-toolbar-title>
</v-app-bar>
</v-app>
</template>
The code is working, and i can see Vue being loaded when i open my Django site.
The problem with this is that i don't know how to get them along. For example, i added a <h1>TEST</h1> but it does not appear when i load Vue, since the Vue part covers it. I also don't understand, if i have a conditional on my Django template, such as {% if user.is_authenticated %} i can't use it on Vue, because it won't be loaded by it.
For example, i have a navbar. Instead of that navbar i want to use the below Vue navbar but i can't, because the current navbar has some links to parts of my site, and since the links are made in Django template language, they won't be loaded by Vue.
You should understand that Vue is a frontend framework that is agnostic to the backend, and Django is, in contrast a backend framework (that can be used in such way to be agnostic to the frontend, I assume this is what you are trying to do).
The way Vue works is that it renders the content inside the div#app tag in index.html, that's why your h1 tag doesn't work. you will have to include that h1 tag inside your vue app in the right component in order to work (don't forget to recompile your components after editing, in case you are using smthng like webpack...etc).
Regarding the Django conditionals part, the point is that now, your Vue app is a seperate application than the Django App (and they will have to communicate through an API using HTTP calls). So in order for authentication to work (or any other logic), you will have to handle that logic both in your Vue app and your Django app
Following the docs, I am trying to get Reveal to work. Its a pretty vanilla installation. I am loading Foundation and jQuery via jsdelivr. I can see the div I am trying to load into the modal, but it doesn't get loaded.
In order for Zurb Reveal to function properly, the javascripts must be loaded after the modal elements.
click here
<div id="myModal" class="reveal-modal" data-reveal>modal content</div>
<script src="jquery.js"></script>
<script src="foundation.min.js"></script>
If the <div id="myModal"> is placed after the foundation script tag, it won't work.
I have a template structured as follows:
<html>
<head><title> {%block title %} Default title {% endblock %} </title> </head>
<body>
<iframe>
<head> <title> {% block title %} Title for frame {% endblock %} </title> </head>
<body> Main content. This is what people see on the web page. </body>
</iframe>
<!-- Content that I do not want to reload every time. A player, to be precise. -->
</body>
</html>
Within the iframe, I inherit templates and so on, to display my final page. The title block within the iframe gets replaced properly, and the title of the iframe is what it should be.
However, I want to replace the title of the parent frame, when I load a page inside the iframe. Is it possible to do this? I don't want to do it via Javascript, because that defeats the purpose of SEO. I want the title to be changed when the page is loaded itself, from the server side.
Thanks in advance.
You have two blocks named with name title. Rename one of them and everything should work fine. The Django template construction isn't influenced at all if you are working with iframe or with any other element.
EDIT:
When an iframe gets a new location it sends a request to the server and renders all of its response inside the iframe. So no it is not possible to leverage Django's template system for a change in the iframe's parent site.
I am no SEO expert but using an iframe like this will probably not be liked by a search engine anyway. You should implement the traditional click-pageload way. If you want to speed things up you can use JavaScript on top of that. Captchure your menu clicks and load the needed parts of the site asynchronously. This way both you and your search engine can be happy :)
currently I'm using a JSP templating system which uses this example's lib ("/WEB-INF/tlds/template.tld").
I'm not even sure how it's called.
Anyway it seems like it's not too developed, it makes problems with form POST method, I have no idea who made it (just found it) and I've heard about Apache's Struts & Tiles.
I'm not even sure that Struts does what I'm talking about.
Down to business:
A page in my site has this JSP content, that utilizes the template:
<%# taglib uri="/WEB-INF/tlds/template.tld" prefix="template"%>
<template:insert template="/WEB-INF/main_template_page/template.jsp">
<template:put name="title" content="Title here" direct="true" />
<template:put name="content" content="/content.jsp" />
</template:insert>
The template is:
<%# taglib uri='/WEB-INF/tlds/template.tld' prefix='template'%>
<html>
<head>
<title>
<template:get name='title' />
</title>
<link type="text/css" rel="stylesheet" href="/styles.css" />
</head>
<body>
<div id="div_header">
<div class="content">
<%#include file='header.html'%>
</div>
</div>
<div id="div_content">
<template:get name='content' />
</div>
<div id="div_footer">
<%#include file='footer.html'%>
</div>
</body>
</html>
So as you see each page gives the template some parameters and it all works nice.
Is there a "well-established" system that does that? I'm sure there is; What its name? Which would you use for pretty much simple pages, but, has to support dynamic ones with code (JSP).
Quaternion is right that Tiles and SiteMesh are both pretty popular decoration frameworks. You can also use JSP .tag files to achieve this, as shown in this answer.
I've never used SiteMesh, but I've worked on several projects at work that use Tiles and I don't care for it -- to me it's just an extra layer that doesn't add enough bang-for-my-buck. Tag files have the added bonus of being a built-in part of JSP.
Apache Tiles and Sitemesh are the two most popular systems. Tiles is more in keeping with what you demonstrated.