Page History
...
<script src='localhost:8080/JsAPI/v3'/></script> |
...
Embedding stories with the Advanced API
From Yellowfin 9.4, you can embed a story with the publish UUID of the story, as described earlier on this page.
Using the Advanced API toolset expands the options available to you when embedding a story, so that you can adjust the look and feel of the story to suit your needs. You may wish to hide contributors or limit the width of the embedded story, and the Advanced API lets you do this.
Advanced API
A new object will be added to the yellowfin object, this will be stories
Code Block | ||
---|---|---|
| ||
<script src="http://yellowfinServer/JsAPI/v3"></script>
<div id="myStoryDiv"></div>
<script>
yellowfin.loadStoryAPI().then(() => {
yellowfin.stories.loadStory({
storyUUID: 'a-story-uuid', //This should be the story's publish uuid
element: document.querySelector('#myStoryDiv') //The div to render the story into
});
}
</script> |
yellowfin.stories
Currently, yellowfin.stories can only contain one function as shown above — loadStory
— which will load the story. However, the loadStory
function can take a number of options. The function and its options are outlined below.
loadStory(options);
Details
Returns: Promise
Promise parameters: _story_API
Description
This function loads the story associated with the passed options.storyUUID
, and returns a promise that is resolved once complete.
The resolved promise will pass a storyAPI
object.
The possible values that can be added to the options object are below.
storyUUID
Details
Embed link option: ?StoryUUID=uuid (This is the PublishUUID for the story to be embedded.)
Description
This option is required: if it is not passed, the loadStory call will fail.
element
There is no embed link option for this
The element that we wish to render the story too
showToolbar
Details
Embed link parameter: &showToolbar=true
Default value: true
Description
This option determines whether the JS API toolbar is shown for the embedded story.
showInfo
Details
Embed link parameter: &showInfo=true
Default value: true
Description
This option determines whether the embedded story's info dropdown is visible.
showExport
Details
Embed link parameter: &showExport=true
Default value: true
Description
This option determines whether the embedded story's PDF export options are visible to the story viewer.
showBannerImage
Details
Embed link parameter: &showBannerImage=true
Default value: true
Description
This option determines whether the embedded story's banner image is shown.
showHeader
Details
Embed link parameter: &showHeader=true
Default value: true
Description
This option determines if the embedded story's header is shown.
A story's header includes the fields for author and date, and the counters for likes and reads. To display any of these, first include this showHeader
option, and set it to true.
showAuthor
Details
Embed link parameter: &showAuthor=true
Default value: true
Description
This option determines whether the embedded story's author is shown. Even if it's set to true, it will only be displayed if the showHeader
option is also present and set to true.
showDateContainer
Details
Embed link parameter: &showDateContainer=true
Default value: true
Description
This option determines whether the embedded story's publication date is shown. Even if it's set to true, it will only be displayed if the showHeader
option is also present and set to true.
showLikeButton
Details
Embed link parameter: &showLikeButton=true
Default value: true
Description
This option determines whether the story's 'Like' button is shown. Even if it's set to true, it will only be displayed if the showHeader
option is also present and set to true.
showReadBy
Details
Embed link parameter: &showReadBy=true
Default value: true
Description
This option determines whether the list of people who have read the embedded story is shown. Even if it's set to true, it will only be displayed if the showHeader
option is also present and set to true.
showStoryTitle
Details
Embed link parameter: &showStoryTitle=true
Default value: true
Description
This option determines whether the embedded story's title is displayed.
showFooter
Details
Embed link parameter: &showFooter=true
Default value: true
Description
This option determines whether the embedded story's footer is displayed.
The story footer includes contributors. To display the list of contributors, first include this showFooter
option, and set it to true.
showContributors
Details
Embed link parameter: &showContributors=true
Default value: true
Description
This option determines whether the list of story contributors is shown when embedded. Even if it's set to true, it will only be displayed if the showFooter
option is also present and set to true.
width
Details
Embed link parameter: &width=...
Default value: element width
Description
This option sets the total width of the embedded story.
storyWidth
Details
Embed link parameter: &storyWidth=...
Default value: 3/4 of width
Description
This option sets the full width of the embedded story's body. The width of most of the story's contents will be 200px less, unless it is set to display at full width (eg, an image in wide mode).
bannerImageHeight
Details
Embed link parameter: &bannerImageHeight=...
Default value: 300px
Description
This option sets the custom height that should be applied to the banner image container.
bannerImageWidth
Details
Embed link parameter: &bannerImageWidth=...
Default value: Value of width
This option sets the custom width that should be applied to the banner image.
loadStoryAPI()
Loads the StoryAPI so that we can load stories, returns a promise that is resolved when the API loads.
loadStory(options)
**This is just a pass through option for yellowfin.stories.loadReport the options that are passed to it should be the same, it just ensures that the stories is object is loaded before attempting to load a story.
Functions available in the StoryAPI
- likeStory()
- unlikeStory()
- toggleLike(shouldLike:boolean => Default inverse of current value)
- getCurrentLikeStatus(successFunction: function to call one the current status is received) => Get status from the server
- storyContributors()
- storyReaders()
Example:
Code Block |
---|
src="<%=YF URL%>/JsAPI/v3?StoryUUID=<%=Story Publish UUID%>&showHeader=false&bannerImageWidth=500"></script> |
Example Advanced API :
HTML:
Code Block | ||
---|---|---|
| ||
<script src="<%=YF URL%>/JsAPI/v3"></script>
<div id="storyContainer"></div> |
JavaScript:
...
language | js |
---|
...
For full details, visit the wiki page for the Advanced API.