posted an update

Devlog Update: Integrating Essential Folder Support into Images for Confluence

After completing development of our MVP, we discovered that folder support which we initially considered a stretch goal was an essential feature to ensure scalability and improve user experience. In this update, we delve into the technical challenges we faced and the solutions we implemented to integrate this vital feature.

MVP Recap: Establishing the Foundation

Our MVP focused on core functionalities that addressed the primary requirements:

  • Centralized Image Storage: Leveraging Forge’s custom-content modules, we enabled secure storage of images as attachments within Confluence with our own intermediary formats and indexes entries, all while striking a good balance between performance/image size and quality.
  • Macro-Based Insertion: Developed a dedicated macro allowing users to effortlessly insert images into Confluence page. This lets users use images with a full native feature set available and unmatched compatibility.
  • Permission Management: Utilized Confluence’s space permissions to control access to images, ensuring robust security and appropriate access levels with seamless integration and access controls with pre-existing permission models.
  • Centralised Asset overview and management: We developed a centralised image repository and management interface.

During MVP testing, it became evident that managing and locating images without a hierarchical structure was becoming increasingly cumbersome. Users struggled as lack of a folder-based system made finding what you were looking for a hassle if you couldn’t remember the name of the uploaded asset, as you would have to scroll through pages and pages of content.

Recognising these challenges, we changed our plans and set folders as an MVP requirement to ensure the app could scale alongside our users’ needs.

Technical Implementation: Building Folder Support

Integrating folder support required significant architectural and functional enhancements. Here’s an overview of our development process:

  1. Extending Custom Content Types for Hierarchical Structure

To support folder hierarchies, we extended our custom content types:

  • Folder Entities: Extended our existing Storage system to support multiple storage Nodes with each node representing a folder, this approach ensured future extendability and control.
  • Parent-Child Relationships: Upgraded search, caching and other data control/storage functionality to support folders and flexible hierarchies such as folders.
  • Metadata Management: Enhanced our metadata system to include details about folders.
  • Enhancing the User Interface for Folder Navigation

A user-friendly interface was crucial for effective folder management:

  • Tree-Like Navigation: Implemented a collapsible tree structure, allowing users to navigate through folders effortlessly.
  • Intuitive additions: Enabled intuitive folder creation, deletion and file uploads with helpful prompts and indicators without introducing visual clutter.
  • Updating the Image Insertion Macro

To accommodate the new folder structure, we updated the image insertion to support folder browsing:

  • Image Selection: Modified the image selection dialog to display folders, allowing users to navigate and select images from specific folders.
  • Contextual Search: Enhanced search functionality to allow users to search within specific folders, improving the relevance and speed of search results.
  • Performance Optimization

Ensuring smooth performance with the added complexity of folders was critical as the amount of data loaded could potentially cause issues if

  • Lazy Loading: Implemented lazy loading for folders and images to reduce initial load times and improve responsiveness.
  • Caching Strategies: Improved caching mechanisms to minimize redundant data fetching and accelerate data retrieval and improving app responsivenes.
  • Optimised Data Retrieval: Refined our data queries to handle folder hierarchies without compromising performance.

Overcoming Development Challenges

Integrating folder support introduced several technical challenges that required innovative solutions:

  • Managing Hierarchical Data: Introducing new hierarchies and levels added quite a lot of complexity to our search and caching strategies as the retrieval strategies and key generation needs to be flexible but still information dense to ensure we can load and retrieve subsets efficiently.
  • Ensuring Data Consistency: Maintaining consistency across nested structures was paramount. We employed transactional operations to ensure atomic changes and rollback.

Next Steps

With folder support now robustly integrated, our development roadmap includes:

  • Improved filtering: Introducing comprehensive tagging systems to complement folder hierarchies, allowing multi-faceted organisation and retrieval.
  • Drag and Drop: Enabling intuitive interactions for actions such moving, deleting, and renaming folders and images to enhance the user experience.
  • Enhanced External Integrations: Expanding our external integrations with additional image repositories to provide users with a broader range of assets.
  • User Interface Refinements: Continuously improving the UI for better performance and usability based on ongoing user feedback.

Integrating folder support into Images for Confluence has been a challenging yet rewarding endeavor. By addressing the critical need for scalable and intuitive organization, we’ve significantly enhanced the app’s functionality and user experience. This update not only strengthens our solution but also underscores the importance of adaptability and user-centric development in creating effective tools.

Log in or sign up for Devpost to join the conversation.