Use an OOTB widget or create a new one? - Akumina Community

Use an OOTB widget or create a new one?

You are here:
Estimated reading time: 9 min

We have three options for widgets with Digital Workplace Framework:

  • Existing Control
  • Generic List Control (GLC)
  • Custom Widget

When we determine our approach we will need to ask the following questions:

 

 

Consider the following use cases to help you better understand the Widget Design decision making process.

Use Case 1

Jim has been tasked with building a FAQ page for his company’s Sales Team. After meeting with them, the Sales Team gives Jim the following requirements

  • Sales team members need to be able to do all content management for the FAQ within AppManager
  • Questions can be edited
  • Answers can be edited
  • Questions can be archived, meaning they will not show up on the page but they will remain in the system

Now that Jim has his requirements he is ready to go through the Widget Decision Tree to design his widget.

 

Does the functionality of the proposed control resemble that of an existing control?

Jim opens up the widget manager and searches through the widget instances. He notices an instance of the GenericList widget called Finance-FAQ-FAQ

 

Jim investigates further by editing the app. He takes note of the fact that it refers to a list called FAQ_AK

 

He creates a new page on the site, adds a content editor, pastes the snippet in and publishes.

 

Jim affirms that this widget displays items comprised of questions and answers stored in a SharePoint list. This resembles the proposed control. The answer to this question is yes.

 

Does the data model of the existing control contain the required columns of the data model for the proposed control?

From the requirements, Jim determines that his FAQ data model has 3 required columns

  • A Text field for the question
  • A Text field for the answer
  • A Boolean field for the Archived Item

Jim compares these columns to the FAQ_AK list.

 

The Title and Answer fields conform to his requirements for the question and answer. Jim assumes ItemOrder allows the user to reorder the items, this exceeds his requirements but doesn’t impede on what was initially requested so he is fine with it. He suspects ItemActive may work as the Archived Item field. He tests this out by modifying the item within the FAQ content app in AppManager. FAQ is configured as a slider app, so he flips ItemActive to false by hitting the On-Off switch on the item.

 

He clicks ‘Publish’ and visits his snippet he pasted earlier

 

The question is no longer in the page, but remains in the list. The data model of the existing control does contain the required columns of the data model for the proposed control. The answer to this question is yes. Jim knows he can use this Existing Widget.

Does the output of the existing control conform to that of the proposed control?

Judging from his observations of the snippet’s output in the previous questions. Jim concludes that the output of the existing control conforms to that of the proposed control. The answer to this question is yes.

 

Does the data origin of the existing control conform to that of the proposed control?

Jim notes that the existing control draws its data from the FAQ_AK list within SharePoint. Since the Sales Team wants to be able to edit FAQ entries within SharePoint he concludes that proposed control also will store its data within a single list inside of SharePoint. The answer to this question is yes. All Jim will need is the Widget Snippet of the existing FAQ widget. He gets it from the Widget Instances window that he accessed when answering the first question. For details on how to use Existing Widgets, see the Akumina – Digital Workplace – Widget Manager Overview Document.

 

Use Case 2

Han has been tasked by her company’s Marketing Department with building an image gallery linked to the company’s Facebook page. After her meeting with the Vice President of Marketing she has gathered the following requirements.

  • The image gallery will retrieve images from a Facebook album specified by the Marketing department
  • The image gallery will need to be on a designated ‘Image gallery page’
  • A set number of images should display on the page
  • When the user clicks on an image it should be displayed in a popup

Now that Han has her requirements she is ready to go through the Widget Decision Tree to design her widget.

 

Does the functionality of the proposed control resemble that of an existing control?

Han is viewing her company’s Digital Workplace site and notices a link on the top bar called Media Gallery. She clicks on it.

 

This navigates her to a page called MediaGalleryPhotoList.aspx. On a page there is an existing photo gallery widget.

 

Han clicks on an image and it appears as a popup.

 

Han affirms that this widget displays a set of images and displays them in a popup when clicked. She concludes that the functionality of this existing widget resembles that of the proposed widget. The answer to this question is yes.

 

Does the data model of the existing control contain the required columns of the data model for the proposed control?

From the requirements, Han determines that her Facebook Photo Gallery Data Model contains the following columns

  • An Image Hyperlink column called Image

Han opens up the Digital Workplace Widget Manager and observes that the photo gallery widget she found is a GenericList widget instance that is pulling data from the ImageGallery_AK list.

 

Han decides to investigate the ImageGallery_AK list.

 

The Image column in the ImageGallery_AK list conforms to the required column in Han’s data model. The answer to this question is yes.

 

Does the output of the existing control conform to that of the proposed control?

Han recalls the requirements related to output

  • A set number of images should display on the page
  • When the user clicks on an image it should be displayed in a popup

She compares each requirement to the output of the existing control. Han observes that the existing control displays a set of images on the page, and the number of images to be displayed can be controlled from the Widget Manager.

 

The first requirement is met. Han also remembers that when she clicked on an image it was displayed in a popup. The second requirement is met. The output of the existing control conforms to the proposed control. The answer to this question is yes.

 

Does the data origin of the existing control conform to that of the proposed control?

Han knows that the data for the existing photo gallery widget is stored within a list inside of SharePoint. However, the photo gallery widget that the Marketing Department wants needs to draw its data from the company Facebook page, a third party source. Therefore, the data origin of the existing control does not conform to that of the proposed control. The answer to this question is no. Han will need to create a Customdataload callback for the existing photo gallery widget. She will also need the Widget Snippet of an instance of the existing photo gallery widget that is using her Customdataload callback. For details on how to create Customdataload callbacks, see the Akumina – DigitalWorkplace – Customdataload Callback Widget Document.

Use Case 3

Sarah has been tasked with building a news ticker for her company homepage by the Digital Outreach team. After her meeting with the Director of Digital Outreach she has gathered the following requirements.

  • News on the ticker needs to be the latest news stories from the web (ie from AP)
  • A story should be the title with a link to the actual news article
  • Ticker should grab the top ten stories at time of retrieval
  • Ticker should display one story at a time and rotate on a timer

Now that Sarah has her requirements she is ready to go through the Widget Decision Tree to design her widget.

 

Does the functionality of proposed control resemble that of an existing control?

Sarah opens up the widget manager and searches through the widget instances. She sees a widget called ‘RssNews’ that looks promising.

 

Sarah creates a new page on the site, adds a content editor, and pastes the snippet within

 

Sarah affirms that the widget is displaying news stories that link to articles. This resembles the Proposed Control. The answer to this question is yes.

 

Does the data model of the existing control contain the required columns of the data model for the proposed control?

From the requirements, Sarah concludes that the proposed control has 2 columns in her data model.

  • A Text Field called Title
  • A Text Field called Url

The existing RSS news feed is a custom widget that retrieves its data from a third party. Sarah will verify the data model by inspecting the widget’s output.

She right clicks on the first item in the RSS Feed and sees what data is returned.

 

The item contains both a url, href=http://blogs.findlaw.com/in_house/2017/01/i-9-issues-when-hiring-foreign-workers.html, and a title, I-9 Issues When Hiring Foreign Workers. Sarah affirms that the answer to this question is yes. She can use an Existing Widget.

 

Does the output of the existing control conform to that of the proposed control?

To answer this question, Sarah compares to output of the existing control to her requirements. The requirements relating to output are the following

  • A story should be a title that links to the actual news story
  • Ticker should grab the top ten news stories upon retrieval
  • Ticker should display one story at a time and rotate on a timer

The first requirement is met by the output. However, the last two requirements are not. The existing control only retrieves 4 stories, not 10, and the stories do not display one at a time on a carousel. The answer to this question is no. Sarah will need to create a custom Template. Add the new template to the RssNews control. Create a new instance of the control using the new template and grab the Widget Snippet from it. For details on how to use an Existing Widget with a custom Template, see the Akumina – Digital Workplace – Widget Manager Overview Document.

 

Use Case 4

Praneet has been tasked with creating a Featured Event widget by his company’s HR department. After meeting with Director of HR he has gathered the following requirements:

  • The Featured Event widget needs to be on the HR department’s home page
  • Members of the HR department need to be able to add and edit events via AppManager
  • Each individual event must link to a page for each event
  • A featured event has a title and description, the description will only appear on the page though
  • A featured event has the start date and time
  • A featured event as an image, when the user clicks on the image it will send them to the page.
  • The widget will not feature past events

Does the functionality of proposed control resemble that of an existing control?

Praneet opens up the widget manager and searches through the widget instances. He sees a widget called ‘ImportantDates’ that looks promising.

 

Praneet investigates further by editing the widget instance. He notes that the widget is referring to data stored in a list called ‘ImportantDates_AK’.

 

 

Praneet creates a new page on the site, adds a content editor, and pastes the snippet within.

 

Praneet notes that although the widget does not identically conform to his requirements, it is displaying event dates, titles, and descriptions. This is enough for him to continue exploring using it. He concludes that this existing widget resembles the proposed widget. The answer to this question is yes.

 

Does the data model of existing control contain the required columns of the data model for the proposed control?

From the requirements, Praneet can deduce that the required columns for the data model of the proposed control are the following:

  • A Text field for the Title field
  • A Date field for the Start Date field
  • A Date field for the Expires field
  • A Text field for the Description field
  • A Hyperlink field for the FriendlyUrl field
  • An Image field for the Image field

Praneet compares these columns to those of ImportantDates_AK

 

Praneet observes that an Image column is missing and concludes that the data model of items in ImportantDates_AK does not contain the required columns for the data model of the proposed control. The answer to this question is no.

 

Does the data for proposed control sit inside SharePoint?

Praneet recalls the following requirement.

  • Members of the HR department need to be able to add and edit events via AppManager

Since users are adding and editing content in AppManager the data is being stored in a SharePoint list. The answer to this question is yes. Praneet will need to build a new Generic List Widget. He will need to create a custom SharePoint List, which he will base off of the ImportantDates_AK but with additional columns. In addition, he will need to define a custom Callback function in digitalworkplace.custom.js, upload a custom Template, create a new instance of the GenericList widget using this template, and the Widget Snippet from this instance. For details on how to build a Generic List Control see the Akumina – Digital Workplace – GLC Quick Start Document.

 

Use Case 5

Zoran has been tasked with creating a Stock Ticker widget by his company’s Finance Department. After a meeting with the CFO he has gathered the following requirements

  • The widget will need to display current stock prices
  • The widget will need to allow users to customize what symbols they want the stock prices for
  • The widget will need to display multiple stock prices at the same time
  • The widget will need to display the price differential
  • The widget will need to display a chart of the daily price

Now that Zoran has his requirements, he starts down the Widget Design Decision Tree.

 

Does the functionality of proposed control resemble that of an existing control?

Zoran searches the widget instances within the Widget Manager and he cannot find anything that is related to displaying stock prices. The answer to this question is no.

 

Does the data for proposed control sit inside SharePoint?

Zoran recalls one of the requirements he gathered.

  • The widget will need to display current stock prices

Since the stock price has to be current, the data will need to be retrieved from a third party that is reporting stock market prices. Therefore, the data for the proposed control does not sit inside SharePoint. Zoran will need to build a Custom Widget for this task. He will need to define a custom Widget Definition within digitalworkplace.custom.js, upload a custom Template, create a new custom widget within the Widget Manager, create a new instance of this custom widget, and the Widget Snippet from this instance. For details on how to build a Custom Widget see the Akumina – Digital Workplace – Custom Widget Document.

Was this article helpful?
Dislike 0
Views: 21
//]]>