I am getting the yammer feeds on my page using the following code in content editor webpart.
<div id="embedded">
</div>
<script src="https://assets.yammer.com/assets/platform_embed.js"></script>
<script> yam.connect.embedFeed({
container: "#embedded",
network: network,
feedType: "group",
feedId: "all",
config: {
header: false ,
footer: false,
}
});
</script>
Is there a way to iterate through each of the feeds and customize on how it appears?
I'm facing the same issue. The embedded feed is contained in an iframe, which is under the yammer.com domain. It would be very challenging to access those dom elements from your app's domain, due to the same origin policy, let alone to modify them. You may find hacks or work-arounds but they are not trivial tasks to achieve.
Related
I Want to develop a flask navigation bar like Google Contacts.
I Want to Render a particular HTML page inside the red box (as in the picture) when I click each of the navigation buttons (the green box as in picture) without refreshing the page.
I have already tried using
{% extends "layout.html" %}
As #Klaus D. mentioned in the comments section, what you want to achieve can be done using Javascript only. Maybe your question were
How can I send a request to my server-side (to get or fetch some information) and receive back a response on the client-side without having to refresh the page unlike the POST method usually does?
I will try to address the aforementioned question because that's probably your case.
A potential solution
Use Ajax for this. Build a function that sends a payload with certain information to the server and once you receive back the response you use that data to dynamically modify the part of the web-page you desire to modify.
Let's first build the right context for the problem. Let's assume you want to filter some projects by their category and you let the user decide. That's the idea of AJAX, the user can send and retrieve data from a server asynchronously.
HTML (div to be modified)
<div class="row" id="construction-projects"></div>
Javascript (Client-side)
$.post('/search_pill', {
category: category, // <---- This is the info payload you send to the server.
}).done(function(data){ // <!--- This is a callback that is being called after the server finished with the request.
// Here you dynamically change parts of your content, in this case we modify the construction-projects container.
$('#construction-projects').html(data.result.map(item => `
<div class="col-md-4">
<div class="card card-plain card-blog">
<div class="card-body">
<h6 class="card-category text-info">${category}</h6>
<h4 class="card-title">
${item.title_intro.substring(0, 40)}...
</h4>
<p class="card-description">
${item.description_intro.substring(0, 80)}... <br>
Read More
</p>
</div>
</div>
</div>
`))
}).fail(function(){
console.log('error') // <!---- This is the callback being called if there are Internal Server problems.
});
}
Build a function that will fetch the current page via ajax, but not the whole page, just the div in question from the server. The data will then (again via jQuery) be put inside the same div in question and replace old content with new one.
Flask (Server-side)
''' Ajax path for filtering between project Categories. '''
#bp.route('/search_pill', methods=['POST'])
def search_pill():
category = request.form['category']
current_page = int(request.form['current_page'])
## Search in your database and send back the serialized object.
return jsonify(result = [p.serialize() for p in project_list])
Thank you #CaffeinatedCod3r,#Klaus D and #newbie99 for your answers.
I Figured it out. instead of using Flask we can use Angular JS Routing for navigation.
Here is the example that i referred:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<head>
<base href="/">
</head>
<body ng-app="myApp">
<p>Main</p>
Banana
Tomato
<p>Click on the links to change the content.</p>
<p>Use the "otherwise" method to define what to display when none of the links are clicked.</p>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
})
.otherwise({
template : "<h1>Nothing</h1><p>Nothing has been selected</p>"
});
$locationProvider.html5Mode(true);
});
</script>
</body>
</html>
By Using $locationProvider.html5Mode(true) i was able to remove the # from the URL.
I am trying to embed an AWS Quicksight dashboard into our application but I am having some trouble with the embed process. The URL has been generated correctly and but I get a permission denied error when I attempt to embed it.
I am able to load the generated URL directly in a new tab but when I attempt to embed it I get a 401 error.
I have whitelisted the domain in the Quicksight console and am accessing the page over HTTPS. The complete test page is shown below.
The following code is what I am using to test embedding. It was taken from an Amazon example.
<!DOCTYPE html>
<html>
<head>
<title>My Dashboard</title>
<script src="https://unpkg.com/amazon-quicksight-embedding-sdk/dist/quicksight-embedding-js-sdk.min.js" ></script>
<script type="text/javascript">
function embedDashboard() {
var containerDiv = document.getElementById("dashboardContainer");
var params = {
url: "<link that works in a standalone browser tab>",
container: containerDiv,
parameters: {
},
height: "700px",
width: "1000px"
};
var dashboard = QuickSightEmbedding.embedDashboard(params);
dashboard.on('error', function(err) {console.log('dashboard error:', err)});
dashboard.on('load', function() {});
}
</script>
</head>
<body onload="embedDashboard()">
<div id="dashboardContainer"></div>
</body>
</html>
Amazon sends a 302, followed by a 401. Which results in a frame with the error message "We can't display this page (Not Authorized).
The first request in the image fetches a fresh link from the server and the subsequent two are the framing attempt.
I would expect that if something was wrong with my authorization then a loading the link in it's own tab would not work. I think the issue must be with the frame but don't know what other options to check beyond the whitelist.
Does anyone have any idea what else I can try?
I'm learning to build a API using Amazon Web Services' API Gateway, DynamoDB, and Lambda.
I've been following a video playlist tutorial on Youtube. So far, I've created the desired Lambda Function, DynamoDB Table, and also the API Gateway.
Now all I need to do is build a frontend that display my current items in the table and also the entry.
So far I made it to this part here.
In the video, he uses JavaScript to make an ajax request and fetch the items in the DynamoDB Table. I've written the same ajax request with the html.
<html>
<head>
<h1 style="color:rosybrown;">Latest guestbook entries:</h1>
</head>
<body>
<div id="entries">
</div>
<h1>New Entry</h1>
<form>
<label for="msg">Message</label>
<textarea id="msg"></textarea>
<button id="submitButton">Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var API_URL = "someURL/prod/entries";
$(document).ready(function(){
$.ajax({
type: "GET",
url: API_URL,
success: function(data){
$("#entries").html("");
data.Items.forEach(function(guestbookItem){
$("#entries").append("<p>"+guestbookItem+"</p>");
})
}
});
});
</script>
</body>
So here I'm going to explain my purpose. The goal is the display the items in the DynamODB table that I have created while also accepting new entries. It has a date and message item.
The API Gateway has an /entries resource and has two methods, GET and POST. /prod means it was deployed on a production stage.
When invoking the URL for the GET method. I receive this output
"{\"Items\": [{\"date\": 20180512, \"message\": \"this is my 4th message\"}, {\"date\": 20180513, \"message\": \"I love AWS\"}], \"Count\": 2, \"ScannedCount\": 2, \"ResponseMetadata\": {\"RequestId\": \"SOME_REQUEST_ID\", \"HTTPStatusCode\": 200, \"HTTPHeaders\": {\"server\": \"Server\", \"date\": \"Mon, 14 May 2018 20:32:43 GMT\", \"content-type\": \"application/x-amz-json-1.0\", \"content-length\": \"160\", \"connection\": \"keep-alive\", \"x-amzn-requestid\": \"SOME_REQUEST_ID\", \"x-amz-crc32\": \"2401247050\"}, \"RetryAttempts\": 0}}"
However, after running the index.html file on my local host.
The entries did not appear. When I checked the console, it turns out I receive the following error
index.html:33 Uncaught TypeError: Cannot read property 'forEach' of undefined
at Object.success (index.html:33)
at u (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at k (jquery.min.js:2)
at XMLHttpRequest.<anonymous> (jquery.min.js:2)
I was not really sure what is going on. Items does exist in the response. I've been stuck with this for days. If anybody could point out what I was missing, it would be greatly appreciated!
Am I able to load a custom template based on a condition?
eg..
If I was making a booking for a mechanic then the editor form would show textboxes for carmodel, yearmake etc.
If I was making a booking for a carpet cleaner the editor form would show textboxes for howmanyrooms, room sizes etc..
Am I able to pass an ID of a service and show the particular editor form for the correct service?
we can currently display this functionality if we create different scheduler Views but that would then create a duplication of many pages.
I had the exact same problem and after searching a long time and combining what I found, I came to this :
1) above my scheduler I have a kendodropdownlist
<input id="reservationPicker" />
<script>
$("#reservationPicker").kendoDropDownList({
dataTextField: "name",
dataValueField: "reservationDefTypeId",
dataSource: reservationPickerDataSource
});
</script>
2) my event has an extra field reservationDef which will hold the information of the dropdownlist.
3) I can use this information in my template
<script id="editorScheduler" type="text/x-kendo-template">
<center>
<div id="main">
#if(reservationDef=="mechanic"){#
<h3>Mechanic stuff</h3>
#}else if(reservationDef=="carpetCleaner"){#
<h3>Carpet Cleaner stuff</h3>
#}else{#
<h3>unknown type of reservation !</h3>
#: reservationDef #
#}#
</div>
</center>
</script>
4) I use this template in my scheduler
editable: {
template: $("#editorScheduler").html()
},
5) but what with a new appointment ! I use the add event of the scheduler and I fill in this information in the event
add: function (e) {
var reservationTypes = $("#reservationPicker").data("kendoDropDownList");
var selectedReservationType = reservationTypes.dataItem();
e.event.reservationDef = selectedReservationType.appointmentTitle;
},
This does the trick for me. Good luck !
No I didn't but I did find a work around by dynamically adding textboxes on the following page. To b able to choose a view model at runtime for the scheduler didn't seem possible
if anyone knows how to load a particular viewmodel at runtime using mvc would be very intresting for future ideas and development.
I'm running the developer's Django server while writing a simple view and it seems whenever I request a page, the console shows that there are 2 GETs for the same URL. What would cause this happen? I'm not using any redirects, so I don't see how a 2nd request would be made?
EDIT: It appears to be caused by the template. Changing to a blank html file for a template resolved the issue. The question is why? I have multiple {% if %} {% endif %} sections, with no elses. Could that be an issue?
It also could be Firefox following a WC3 directive under which it's supposed to dual load if certain tags come empty or broken, for example, a without a src="" etc. That being said, I saved off the rendered HTML on receipt and moved it into a static file, where I added the same headers as the real checkout and a small DB log of all accesses.
I just stumble upon this problem and fixed it removing my img wit src=""
Please confirm, if Django is redirecting after appending slash to your url. Its the property APPEND_SLASH in your settings.py controls that.
The second request is probably caused by a mis-configured asset link - a script, style or img tag which is empty or omits the initial / and is therefore re-requesting the page.
It could be your shortcut/favicon
Do you have link rel="shortcut icon" in your page template? Comment it out to see if it removes the second request
In my case : I have the same javascript code in 2 files : one in the base template and the same one in another template. As I use ajax to not reload all the page I got the call 2x, then 4x, and 8x, ...
The solution is the use the javascript code only in mybase.html
Hereafter my js code :
<script type="text/javascript">
// Code jQuery Ici
$(document).ready(function(){
// GET
$(".ajax_onglet_get").click(function(e){
var lien = $(this).attr('href');
$('#zone_travail').fadeOut('fast', function(){
$('#zone_travail').load(lien, function() {
$('#zone_travail').fadeIn('fast');
});
});
e.preventDefault()
});
});