I am new to file handling in Salesforce. I am currently working on downloading files of all records of a custom object. I read many blogs and found there are a couple of ways to do it. I decided to go with the shepherd URLFOR() approach as it seems simple and easy but now I have all the ContentDocumentId in a string format and I don't know how to use URLFOR() in the Lightning web component. Every blog and post gives the URL but I was not able to find how to use it once it is made. Is it used in Apex or HTML pages?
Can someone guide me?
Here is the URL I have formed
{!URLFOR('/sfc/servlet.shepherd/version/download/' & StringOfContentDocumentIds &'?')}
This is the expression syntax used in VisualForce and in Aura component.
You're talking about Lightning Web Component (known as LWC) so this syntax is not valid.
I would advise to use the standard approach which is using the navigation service.
If you really want to use the shepherd trick, then you need to write something like this:
fileDownload.js
import { LightningElement } from 'lwc'
export default class FileDownLoad extends LightningElement {
contentVersionIds = []
get urlOfContentDocumentFile () {
return `/sfsites/c/sfc/servlet.shepherd/version/download/${this.contentVersionIds.join('/')}?`
}
}
fileDownload.html
<template>
Download
</template>
Please note that I changed the url to add /sfsites/c before as you seems to talk about a community. If it's not, then you can just remove that part.
P.S: I don't know how you get the list of contentVersionIds so I didn't cover that part.
Related
I am making a blog website in React in which user can submit code with other text. The entire code and other text will later be saved into the database. I am looking for the functionality like Stackoverflow's in which user can submit code and it is shown in the post in the original format.
I tried my best to search for the exact name of this functionality(My best guess is using LateX) but couldn't find any. So my exact question is what module or package do I need to represent the code submitted by the user in the original format as in Stackoverflow's question.
Please help me in the problem so I can get along with my work on my website.
After a bit of research into the topic of markdown, I found that react-markdown is a npm module that can be used to create markdown in text string. It is almost similar to the one used in Stackoverflow. But the recent version seems to have some bug, so I used an older version(5.0.0). If you also want to include syntax highlighting, you can use highlight.js. It can be very easily included with react-markdown. Below is an example of react-markdown:
import React from "react";
import ReactMarkdown from "react-markdown";
export default class App3 extends React.Component {
render(){
var value='
#Heading1
<b>line break</b>
_italics_';
return (
<div className="App">
<ReactMarkdown source={value} />
</div>
);}
}
u can also use
dangerouslySetInnerHTML
if u don't to install 3rd libary
I am using Typescript and REACT and I want to utilize and wrap some custom html elements in my TSX. For example, I am using a library with a customer html element called ch5-button an it is used in a vanilla html file as such
<ch5-button class="shadow-pulse-button" type="default" shape="circle" label="" iconClass="fas fa-award">
</ch5-button>
I did a ton of searching, but seems like i am not even smart enough to get the search correct to find how to do this. I am not even sure if I have the correct import statement to get those elements -- the closest I got was :
declare var CrComLib: typeof import('#crestron/ch5-crcomlib');
...
const ch5Button = new CrComLib.Ch5Button();
console.log("ch5Button");
console.log(ch5Button);
The console.log display <ch5-button></ch5-button> soI have no idea if I am even on the right track to using this thing. The ch5Button is a class with a lot of methods that look pretty much like what an html element would have but I just dont know what to do with it and how to learn a method for using it. I found some sites that explain how to use observables and such but I am sketchy on if I am heading down the right path. I have attached am image of what some if the properties and methods of the ch5Button looks like in chrome debugger.
Can anyone point me in the right direction? I would create a REACT component that wraps this class and can use props to set the correct attributes etc.
I am very comfortable building REACT apps but admittedly, I am not an advanced developer with it yet but doing my best to learn.
so my goal is to display a Page from Wikipedia in my Web-Page using React. I have only one Idea to do that, and it's:
First Step: Export data from Wiki as .XML
Second Step: import data from .xml in HTML(using React).
First Step I have done succesfully, but I have Problems with second.
I have found xml-parser from npm(xml-loader):https://www.npmjs.com/package/xml-loader. but it's giving me only following string: "/static/media/wiki.c6730c07.xml" . Knows someone better way to do that, or it will be good if you say, that I am on right way. My code in React is :
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
var wiki = require('./wiki.xml');
class App extends Component {
render() {
return (
<div className="App">
{wiki}
</div>
);
}
}
export default App;
xml-renderer might be a good candidate for helping you.
So, I have found out that, to do something like this, I have to use "xslt", where I can get data from ".xml" and display them how I want. Important is to create a reference between xml and xslt. Here are tree links, where you can see it on example:
https://www.youtube.com/watch?v=Zn9A5k23Oto
https://www.youtube.com/watch?v=Icg0Su5uEa8
https://www.codeproject.com/Articles/12047/How-to-Convert-XML-Files-to-HTML
But last question is: I want to display data from Wiki exactly how it is on it's Page, Is this Possible ?
If someone knows answer, please write Hint.
Regarding to your second question, about how to display data from Wiki exactly how it is on it's Page, you can use the <iframe> tag.
You can find more information here.
I came up with an idea of rendering React Native components, for example, defined by a JSON response from a web service.
What i was thinking was having a JSON response like this:
{
component_type : Text,
content: "Hello World"
}
or, if possible:
{
component: <Text> Hello World</Text>
}
and then have a parser to convert this response to an actual Component an render it like this:
render(){
{response.component[0]}
}
There is any library that can do this?
I've already searched a lot and didn't found anything like this.
It's hard to have a library that attend you the way you want.
I don't think it's a good a idea to send a component text like in the approach #2. It's not a good practise to save the logic of the component in the database.
The first one is better. I have developed an an that we render some forms based on a JSON that we fetch from a web service. It was fully customized by our needs and was inspired in the Swift Library Eureka
There is a famous library called Tcomb form that creates forms based on a schema: https://github.com/gcanti/tcomb-form-native
I am using contentful to get markdown to a react component that uses react-markdown to parse the markdown
import ReactMarkdown from 'react-markdown';
<Markdown source={text} />
Would I like to do is to override the Renderer so instead of it rendering ## as an h2 render i can pass a custom component to override the default h2 type to my own h2 component. How can i do that and is there and examples?
One of the options to <ReactMarkdown> is renderers.
One of the common renderers handles headings. If you look at the default rendering you'll see this:
heading: function Heading(props) {
return createElement('h' + props.level, getCoreProps(props), props.children);
},
So pass in your own heading handler. Check the level inside, roughly:
function CustomHeading(props) {
if (props.level !== 2) {
return createElement(`h${props.level}`, getCoreProps(props), props.children);
}
return <MyCustomElement {...props} />
}
If you don't have access to the code that commonmark-react-renderer gives you in the context of your function (which you probably won't) then you'd also need to duplicate what createElement gives you (but it's simple).
Unrelated: I've never used <ReactMarkdown> (but will), but this took me about five minutes of research. I'm including my path to encourage others to dig into their own questions and hopefully give some insight into how such things can be researched.
The react-markdown home page
Scanned through the "Options" section to see if custom rendering was trivially supported
Found the renderers option, which sounded promising
Clicked the link provided in that option's docs
Saw that heading was one of those (which made sense; I'd expect a renderer for every major formatting that Markdown supports)
Opened up the src directory to see if the implementation was easy to find
There was only one file, so I opened it
Searched the page for "heading" and found it
Cut and pasted that code here
The ability to read docs and follow trails is really important.