I'm trying to retrieve all user's friends profile pictures to render them in a list view.
I get all user's friends that are in the application with this Graph Request:
`const infoRequest = new GraphRequest(
'/me',
{
parameters: {
fields: {
string: 'email, name, first_name, middle_name,
last_name, picture.type(large), cover, birthday, location, friends'
}
}
},
this._responseInfoCallback
);`
Then, I'm trying to render his friends's profile picture with this function
`renderFriends() {
if(this.state.user != null) {
return this.state.user.friends.data.map(friend =>
<View>
<Image
source={{uri:'https://graph.facebook.com/{friend.id}/picture?
type=large'}}
style={styles.profilePicture}
/>
<Text key={friend.id} >{friend.name}</Text>
</View>
)
}
}`
All names are rendered correctly but images are not rendered.
You can check the style of the image below:
`profilePicture: {
height: 120,
width: 120,
borderRadius: 60,
marginTop: height / 15,
},`
Change
{{ uri: 'https://graph.facebook.com/{friend.id}/picture?type=large' }}
By
{{ uri: 'https://graph.facebook.com/' + friend.id + '/picture?type=large' }}
{friend.id} doesn't get replaced by the friend id, it is interpreted as the literal string {friend.id}, which gives you the wrong url.
Related
I am having trouble creating a PDF at the same time and then sending the same file via e-mail.
I tried to use apex_util.get_print_document but I don't know what to enter in p_report_query_name and p_report_layout parameters.
I also tried to use html2pdf but I don't know how to send the created pdf to the e-mail attachment.
Please help
js:
function pdf_DLoad (p_id) {
var element = document.getElementById(p_id);
var opt = {
margin: 1,
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait'
}
};
html2pdf().set(opt).from(element).outputPdf('datauristring')
.then(function (res)
{
this.blobString = res;
console.log(res);
apex.item("P10_NEW").setValue(res);
});
Video is not being displayed in the message.
Got message " Video is not implemented by GiftedChat. You need to provide your own implementation by using renderMessageVideo prop.
Message[] has the following values:
_id:
text:
createdAt:
user:{
_id:
name:
avatar:
},
image:
video:
<GiftedChat
messages={this.state.messages}
onSend={this.onSend.bind(this)}
user={{
_id: this.state.LoggedinuserID,
}}
/>
Please help what am I doing wrong
What its saying that you need to provide your custom component to wrap the video into
In your case you are rendering the messages directly to the GiftedChat so we will pass our custom video component to GiftedChat as below
Reference: https://github.com/FaridSafi/react-native-gifted-chat/#react-native-video-and-expo-av
import { Video,Audio } from 'expo-av';
const renderMessageVideo = (props: any) => {
const { currentMessage } = props;
return (
<View style={{ padding: 20 }}>
<Video
resizeMode="contain"
useNativeControls
shouldPlay={false}
source={{ uri: currentMessage.video }}
style={styles.video}
/>
</View>
);
};
<GiftedChat
messages={this.state.messages}
onSend={this.onSend.bind(this)}
renderMessageVideo={renderMessageVideo}
user={{
_id: this.state.LoggedinuserID,
}}
/>
I am using ember.js and handlebars. I need to pass a string to a component and that string needs to have line breaks. I am struggling trying to get the line breaks to work. I have tried using
\n, \ , + `' + none of these seem to work
Here is my computed property where the string is getting returned:
scoreMessage: Ember.computed(function scoreMessage () {
const model = this.get('model')
return Ember.String.htmlSafe(`Advocacy Post: ${model.total_advocacy_posts_count}\n
Assets Submitted: ${model.total_assets_submitted_count}\n Engagement from asset:
${model.total_engagement_from_assets_count}`);
}),
Here is the handlebars file where the scoreMessage is passed into the ui-tooltip-on-mouseover component
<li class="item-cell flex-end score">
{{#ui-tooltip-on-mouseover
message=scoreMessage
tooltipLocation="top"
class="action"
}}
Score
{{/ui-tooltip-on-mouseover}}
</li>
Hmm, can you try white-space: pre-line; CSS to the tooltip? with this approach, you don't need to specify \n, you just press enter.
i.e.
scoreMessage: Ember.computed(function scoreMessage () {
const model = this.get('model')
return Ember.String.htmlSafe(
`Advocacy Post: ${model.total_advocacy_posts_count}
Assets Submitted: ${model.total_assets_submitted_count}
Engagement from asset: ${model.total_engagement_from_assets_count}`
);
}),
var model = { total_advocacy_posts_count: 3, total_assets_submitted_count: 4, total_engagement_from_assets_count: 7 }
var text = `Advocacy Post: ${model.total_advocacy_posts_count}
Assets Submitted: ${model.total_assets_submitted_count}
Engagement from asset: ${model.total_engagement_from_assets_count}`
window.onload = function() {
document.querySelector('.tooltip.other').innerHTML = text;
}
.tooltip {
white-space: pre-line;
padding: 20px;
}
body {
background: white;
}
<div class="tooltip">
Some
Text that does take
line breaks without specifying them
</div>
<div class="tooltip other"></div>
`
I am using rails and algolia gem with mongoid datastore.
I am sending data to algolia for a model Question. One of the doc example in Algolia system is
objectID: 5691e056410213a381000000
text: "what is #cool about your name Mr. John? #name #cool"
asked_to: ["565571704102139759000000", "i7683yiq7r8998778346q686", "kjgusa67g87y8e7qtwe87qwe898989"]
asked_by: "564a9b804102132465000000"
created_at: "2016-01-10T04:38:46.201Z"
card_url: "http://localhost:3000/cards/5691e056410213a381000000"
answerers: []
has_answer: false
requestor_count: 0
status: "active"
popularity_point: 0
created_at_i: 1452400726
_tags: ["cool", "name"]
I want to find all those documents, where it meets these two conditions:
1) text contains your name
2) asked_to contains i7683yiq7r8998778346q686
I am using Twitter's typeahead javascript library. And my UI's javascript to implement algolia search is as follows:
<input class="typeahead ui-widget form-control input-md search-box tt-input" id="typeahead-algolia" placeholder="Search questions" spellcheck="false" type="text" autocomplete="off" dir="auto" style="position: relative; vertical-align: top;">
$(document).on('ready page:load', function () {
var client = algoliasearch("APPLICATION_ID", "SEARCH_KEY");
var index = client.initIndex('Question');
$('#typeahead-algolia').typeahead(
{
hint: false,
highlight: true,
minLength: 1
},
{
source: index.ttAdapter({hitsPerPage: 10}),
displayKey: 'text'
}
).on('keyup', this, function (event) {
if (event.keyCode == 13) {
$('#typeahead-algolia').typeahead('close');
window.location.href = "/?keyword="+encodeURIComponent($('#typeahead-algolia').val());
}
});
$('.typeahead').bind('typeahead:select', function(ev, suggestion) {
window.location.href = suggestion.card_url;
});
});
So my question is:
This code works perfectly. But how to add condition for asked_to contains i7683yiq7r8998778346q686 in above javascript to filter out result.
You can use a facet filter on the asked_to attribute in your query.
You first need to declare the attribute asked_to as an attribute for faceting in your index settings and then pass asked_to:i7683yiq7r8998778346q686 as a facet filter in your query via the facetFiltersquery parameter.
When your index settings are changed, you can change your source to add the facetFilters parameter:
$('#typeahead-algolia').typeahead(
{
hint: false,
highlight: true,
minLength: 1
},
{
source: index.ttAdapter({hitsPerPage: 10, facetFilters: "asked_to:i7683yiq7r8998778346q686"}),
displayKey: 'text'
}
).on('keyup', this, function (event) {
if (event.keyCode == 13) {
$('#typeahead-algolia').typeahead('close');
window.location.href = "/?keyword="+encodeURIComponent($('#typeahead-algolia').val());
}
});
to have autocompletion on an input,I do this:
in views.py:
def getpositions(request):
if request.is_ajax():
query = request.GET.get("term", "")
positions=Position.objects.filter(name__icontains=query)
results = []
for position in positions:
position_json={}
position_json['name']=position.name
results.append(position_json)
data=simplejson.dumps(results)
else:
data = 'error'
return HttpResponse(data, mimetype='application/json')
in template:
$(document).ready(function(){
$("#positions").autocomplete({
source: "{% url CompanyHub.views.getPositions%}",
success: function( data ) {
response( $.map( data, function( item ) {
return {
label: item.name,
value: item.name
}
}));
},
minLength: 2,
});
});
and #positions is : <input type="text" id="positions" />
every thing is ok,but it just show Undefined instead of showing list of results,I tryed many things but no way!!
jQuery UI autocomplete doesnt have a success option you are using to format your data. Check the option list here http://jqueryui.com/demos/autocomplete/ . Instead You can use a callback function for source option and handle your own ajax call yourself and format data like you want.
$("#positions").autocomplete({
source: function( req,resp ) {
$.get("{% url CompanyHub.views.getPositions%}",
{term:req.term},function(data){
resp( $.map( data, function( item ) {
return {
label: item.name,
value: item.name
};
})
);
});
},
minLength: 2,
});